Gatsby: Failed to parse develop-static-entry.js

[Alxandr]

My build is failing with the following error:

  Error: Module parse failed: /Users/alxandr/hub/alxandr.me/packages/node_modules/alxandr.me/.cache/develop-static-entry.js Unexpected token (63:4)
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token (63:4)

  - acorn.js:2221 Parser.pp$4.raise
    [gatsby]/[webpack]/[acorn]/dist/acorn.js:2221:15

The file is auto-generated, and the token it's crashing on is ... (object rest spread). I tried to add the object rest spread to the babel config (both by creating a babelrc, and by adding a modifyBabelrc). Neither helped.

[KyleAMathews]

Does this happen on any gatsby site? I've never seen or heard of this error before. The default Babel setup handles object spread so not sure why that's not working.

[Alxandr]

I don't know. It happens on my site, and I don't know why. Nor do I know how to go about debugging it. It handles object rest spread in my own files just fine, but not in the auto-generated one .cache/develop-static-entry.js.

[Alxandr]

Taken from https://github.com/babel/babel/blob/master/experimental/babel-preset-env/README.md

Might be related...

[jquense]

Do you have a local .babelrc? The default config definitely has all the necessary plugins via preset-env and stage-0

[Alxandr]

No I don't. But given that a babel readme has a warning about some version incompatibilities with object rest spread, I figured it'd be likely that is the cause of my issues.

[mathieudutour]

I stumbled upon the same error.

In my case, it's because my gatsby folder was inside a node_modules folder.

The following webpack loader

{
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: { plugins: [Array], presets: [Array], cacheDirectory: true }
}

is ignoring any file which has a name matching /(node_modules|bower_components)/. This is maybe a bit greedy. Could we perhaps exclude only if the name is new Regex(process.cwd() + '/(node_modules|bower_components)') or something?

[bodia-uz]

Similar error with the acorn.
Gatsby site is inside a node_modules. Something like this:
/PATH_TO_MY_APP/node_modules/PATH_TO_LIB/site/node_modules/gatsby

with fix from @mathieudutour, works OK:

new RegExp(process.cwd() + '/(node_modules|bower_components)')

UPDATE:
fix via gatsby-node.js
https://www.gatsbyjs.org/docs/node-apis/#modifyWebpackConfig

exports.modifyWebpackConfig = ({ config }) => {
  config._loaders.js.config.exclude[0] = new RegExp(process.cwd() + '/(node_modules|bower_components)');
};

[brettlyne]

I was having this same issue trying to use a 3rd party React component library with Gatsby.

The first example on the page @bodia-uz linked to worked for me.
https://www.gatsbyjs.org/docs/add-custom-webpack-config/#modifying-the-babel-loader

In my case, trying out the Salesforce design system, I needed to change the exclude line to:

exclude: modulePath =>
        /node_modules/.test(modulePath) && !/node_modules\/(@salesforce)/.test(modulePath)

This was a little confusing initially since you're adding an exclusion to the exclusion with the && !

[magnusarinell]

Worked for me using @bodia-uz fix but without using an indexer:

exports.modifyWebpackConfig = ({ config }) => {
  config._loaders.js.config.exclude = new RegExp(process.cwd() + '/(node_modules|bower_components)');
};

[bodia-uz]

As variant, If all your code to transpile is inside src:

exports.modifyWebpackConfig = ({ config }) => {
  config._loaders.js.config.include = [
    new RegExp(process.cwd() + '/src'),
    new RegExp(process.cwd() + '/.cache'),
  ];
  config._loaders.js.config.exclude = undefined;
};

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[johnatspreadstreet]

Do you have a local .babelrc? The default config definitely has all the necessary plugins via preset-env and stage-0

Nice, this was definitely the issue I was having.