Gatsby: [v2] Error: Cannot find module 'core-js/modules/es6.array.filter'

[endymion1818]

Description

gatsby develop returns the above error

Steps to reproduce

I upgraded a site from v2 to v2 by copying my dependencies, modules & pages over and following the guide here: https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 8.11.3 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.1.2
  npmPackages:
    gatsby: 2.0.0-rc.9 => 2.0.0-rc.9 
    gatsby-plugin-canonical-urls: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-google-tagmanager: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-manifest: next => 2.0.2-rc.1 
    gatsby-plugin-offline: next => 2.0.0-rc.2 
    gatsby-plugin-react-helmet: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-plugin-remove-trailing-slashes: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0 
    gatsby-plugin-sitemap: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-styled-components: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-source-apiserver: ^1.3.1 => 1.3.1 
    gatsby-source-filesystem: ^2.0.1-rc.1 => 2.0.1-rc.1 
    gatsby-source-wordpress: ^3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-transformer-javascript-frontmatter: ^2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-transformer-json: ^2.1.1-rc.1 => 2.1.1-rc.1 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

I've tried installing babel-preset-env and deleting node_modules & reinstalling.

[pieh]

Can you try deleting lock files (yarn.lock / package-lock.json) and node_modules and reinstalling again?

[endymion1818]

Thanks Pieh yeah tried that, no go I'm afraid.

I did actually just fix this by running npm install --save core-js

[kakadiadarpan]

Awesome!

[pieh]

Do you have still have full error output (with stack trace)? It would be good to get that fixed if this is gatsby related and not problem with one of 3rd part packages?

[krismorf]

Pieh I had the same issue and I pinpointed it to babel removing the core-js dependency in their 7.0.0 beta versions, before they put it up again in their final version.

[alvis]

@kmorf good found! I have got the same issue too.

[pieh]

Pieh I had the same issue and I pinpointed it to babel removing the core-js dependency in their 7.0.0 beta versions, before they put it up again in their final version.

Right, this isn't something that gatsby can fix right?

Also does this error happens in node or in browser? Definitely need more info here, to know if this is something that actually should be issue here or something that happened upstream that we have no control over :/

[krismorf]

I don't think gatsby should attempt to fix this. There were a lot of different React projects failing when this was happening so users added core-js to their devDependencies. I haven't had this issue since babel 7.0.0 was released.

[pieh]

Let's close this for now then (again :) )

[krismorf]

I run into the issue again just now. I'm attaching a commit on my gatsby-node.js. I think I got the error when I used _.each instead of .forEach.

[arcticicestudio]

I'm also affected by this problem and I think it can be led back to the Babel 7 changes for the @babel/polyfill package. Also see mdx-js/mdx#271 for a detailed description of my current analyse. Currently the only workaround to get rid of this is to add @babel/polyfill as dev dependency which, like described in the migration guide linked above, is now more or less just a proxy for the core-js v2 package.

[secretfader]

I'm seeing this issue as well, and can confirm that a recent change in Babel is what broke the build. Now investigating how this can be fixed in Gatsby. (Adding core-js to devDependencies did nothing for the build that I can tell.)

[arcticicestudio]

@secretfader You can add @babel/polyfill to your devDependencies, it'll automatically load necessary core-js polyfills. Make sure to delete your node_modules folder and possibly your package-lock.json file and run npm install to start with a clean resolved dependency tree.

[oliviertassinari]

I can reproduce the issue. If you are looking for a reproduction repository, https://github.com/mui-org/material-ui/blob/master/examples/gatsby/README.md is a good one.

[ben-rogerson]

@secretfader You can add @babel/polyfill to your devDependencies, it'll automatically load necessary core-js polyfills. Make sure to delete your node_modules folder and possibly your package-lock.json file and run npm install to start with a clean resolved dependency tree.

Adding "@babel/polyfill": "^7.0.0", and following those instructions didn't work for me.
Adding core-js did work npm install --save core-js.

[arcticicestudio]

@ben-rogerson I should have updated my comment, because the error occurred again after I removed my package-lock.json. It looks like the dependencies haven't been resolved correctly, but ironically it worked after doing so. Sometimes npm is a mystery of rainbow unicorns :roll_eyes: Also in mdx-js/mdx#271 the maintainer posted it didn't worked with npm, but when using yarn everything run fine.

I'll play around with the results when adding core-js or @babel/polyfill as dependency, but I'm curious why it works afterwards since core-js is already resolved through gatsby and without explicitly importing the polyfill in the code I don't see any difference between the devDependencies solution.

[cpboyd]

Just an FYI, but I recently switched from Yarn to NPM on one of my Gatsby sites and had this issue.

As @arcticicestudio states, it seems especially strange given that gatsby lists core-js as a dependency.

[nickensoul]

Additional info: after cleaning up .cache, node_modules and package-lock.json andinstalling modules again via npm I got
WebpackError: Cannot find module 'core-js/modules/es6.array.sort'
Installing core-js directly fixes issue.

[aa-ziyi]

yarn add core-js
如果还不行
删除 node_modules,然后使用 yarn 安装，不要使用 cnpm 安装；

[alexlafroscia]

I'm running into this problem as well.

Originally I was running Storybook version 5.1.0-alpha.X. If I run yarn why core-js the dominant version of core-js(the one hoisted to core-js) is 2.6.5.

After updating to Storybook 5.1.0-beta.0 today, the hoisted version of core-js became 3.0.1, and for some reason, that broke the Gatsby build.

Why doesn't Gatsby resolve the actual version of core-js from its dependencies?

I tried the workaround of adding core-js to my devDependencies directly but that did not solve the problem.

[tetondev]

I had the same issue.

Downgrading my core-js version to 2.6.5 (dev-dependency) fixed it.

[anonyco]

npm install --save core-js no longer works.

Use npm install --save --dev [email protected] instead.

However, try running npm install --dev [email protected] in the project's directory so that you do not save it globally.

[rosinant3]

If the previous doesn't work, use:

npm install --save [email protected] -g

This works but don't do it

I assume, the cause of this problem was that I've used npm to update and work on a project that was initially started with yarn. Hence the mess up. Like arcticicestudio pointed out.*

[arcticicestudio]

If the previous doesn't work, use:

npm install --save [email protected] -g

Installing such packages globally is a really bad idea and there's no reason to do so. If you’e having problems when installed locally (with pinned version), it might be because you've already installed other packages globally that causing conflicts now.
I guess the main problem of this ticket is npm. It seems like it doesn't resolve the dependency tree correct. I've switched to yarn last year (mainly because of _workspaces_) and never had problems again. I guess _npm_ users need to use the workaround by pinning the version and hope that _npm_ 8 (that'll be powered by their new tink lib, announced in their _npm Roadmap Summer 2019_ blog post) fixes such problems (or switch to yarn for _Gatsby_ based projects).

[cillurzom]

Thanks Pieh yeah tried that, no go I'm afraid.

I did actually just fix this by running npm install --save core-js

Got it working thanks to this!