Gatsby: `optimize-hook-destructuring` throws when skipping some items

[pedro-surf]

Updated description:

Skipping some items when destructuring arrays returned by hooks result in following errors:

Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got null

To reproduce (and test) - add following test to https://github.com/gatsbyjs/gatsby/blob/master/packages/babel-preset-gatsby/src/__tests__/optimize-hook-destructuring.js:

  it(`should handle skipped items`, () => {
    const input = trim`
      import { useState } from 'react';
      const [, setCount] = useState(0);
    `

    expect(() => babel(input)).not.toThrow()
    expect(babel(input)).toMatchInlineSnapshot()
  })

Right now it will fail and the .not.toThrow() assertion

Ref: https://github.com/gatsbyjs/gatsby/pull/22619

---

Original description:

I receive this random error while running build remotely (pipeline):

failed Building production JavaScript and CSS bundles - 101.981s
error Generating JavaScript bundles failed
Property value of ObjectProperty expected node to be of a type ["Expression","PatternLike"] but instead got null

Building locally it's all okay though.
I think this may be related to request being deprecated

I'm using old versions though:

"gatsby": "^2.1.18",
"gatsby-background-image": "^0.2.72",
"gatsby-cli": "^2.8.27",
"gatsby-image": "^2.0.30",
"gatsby-plugin-create-client-paths": "^2.1.17",
"gatsby-plugin-material-ui": "1.2.5",
"gatsby-plugin-page-creator": "^2.0.10",
"gatsby-plugin-react-helmet": "^3.0.7",
"gatsby-plugin-sharp": "^2.0.28",
"gatsby-plugin-styled-components": "^3.0.6",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-plugin-webpack-bundle-analyzer": "^1.0.4",
"gatsby-source-filesystem": "^2.0.26",
"gatsby-transformer-sharp": "^2.1.17",

How shall I change this to put it all back together? Thank you!

[pieh]

Can you clarify what you mean with "pipeline"? Is it Azure Pipelines?

The error message you get seems very similar to one reported in https://github.com/babel/babel/issues/8323 which seems like it is babel related issue (at least in some capacity).

Are you able to share your site source code?

[pedro-surf]

@pieh it's GitLab pipeline. thanks

[pieh]

Did you make use of those docs? https://www.gatsbyjs.org/docs/recipes/gitlab-continuous-integration/ ?

There's not really much information here that can help me narrow it down ;)

[johannesspohr]

I'm getting the same error message in a typescript file since I updated all my dependencies, too (locally). I commented out line by line to find the problem and the current version doesn't seem to like this construct:

const [, triggerRerender] = useState<object>()

replacing it with

const [unusedValue, triggerRerender] = useState<object>()

fixes the problem.

[pieh]

Ohhhh, that's very interesting find. I now might have idea about this. This might be related to this https://github.com/gatsbyjs/gatsby/pull/22619

[pieh]

Yeah, the optimize-hook-destructuring is the cause. I will update the issue title / description to match this, because GitLab pipeline is not the problem here

[pieh]

The fix will be soon published (it's merged for now) - will comment again, once it ends up on npm

[pieh]

This should be fixed in [email protected]