Gatsby: [V2] Error: WebpackError: Cannot find module 'core-js/modules/es6.object.assign'

[IadityaM]

Description

Following Error encountered upon running gatsby develop in the terminal

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html

WebpackError: Cannot find module 'core-js/modules/es6.object.assign'

• gatsby-browser-entry.js:1 Function.Module._load
  lib/.cache/gatsby-browser-entry.js:1:1

• universalModuleDefinition:3 webpackUniversalModuleDefinition
  lib/webpack/universalModuleDefinition:3:1

• universalModuleDefinition:10 Object.
  lib/webpack/universalModuleDefinition:10:2

• extends.js:2 Object.Module._extensions..js
  [lib]/[@babel]/runtime/helpers/esm/extends.js:2:1

• gatsby-browser-entry.js:1 Function.Module._load
  lib/.cache/gatsby-browser-entry.js:1:1

• bootstrap:21 Promise
  lib/webpack/bootstrap:21:1

• develop-static-entry.js:34 Promise._resolveFromExecutor

  lib/.cache/develop-static-entry.js:34:7

Steps to reproduce

Upgraded
firebase to: v5.9.3
formik to: v1.5.2

ran gatsby develop

encountered the error

---

Exact combination of packages and their versions.

"dependencies": {
"firebase": "^5.9.3",
"formik": "^1.5.2",
"gatsby": "^2.3.15",
"gatsby-image": "^2.0.37",
"gatsby-plugin-manifest": "^2.0.27",
"gatsby-plugin-offline": "^2.0.25",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sharp": "^2.0.32",
"gatsby-source-filesystem": "^2.0.29",
"gatsby-transformer-sharp": "^2.1.17",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.0",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-starter-kit": "^0.4.3",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.1.0",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.12.4",
"graphql": "^14.2.1",
"prettier": "^1.16.4"
},

---

Expected result

What should happen?
The build should've completed successfully and the site should've been served on the localhost

Actual result

What happened.
The build failed with the above mentioned message.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 11.13.0 - D:devlibsNodenode.EXE
Yarn: 1.15.2 - D:DevLibsYarnbinyarn.CMD
npm: 6.9.0 - D:devlibsNodenpm.CMD
Browsers:
Edge: 44.17763.1.0
npmPackages:
gatsby: ^2.3.15 => 2.3.15
gatsby-image: ^2.0.37 => 2.0.37
gatsby-plugin-manifest: ^2.0.27 => 2.0.27
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
gatsby-plugin-sharp: ^2.0.32 => 2.0.32
gatsby-source-filesystem: ^2.0.29 => 2.0.29
gatsby-transformer-sharp: ^2.1.17 => 2.1.17

error UNHANDLED REJECTION
Error: The system cannot find the path specified.

• envinfo.js:1 Function.e.exports.sync
  [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:4908

• envinfo.js:1 Object.copySync
  [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:66886

• envinfo.js:1 Object.t.writeSync.e [as writeSync]
  [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:48715

• envinfo.js:1
  [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46872

• envinfo.js:1 Promise.all.then.e
  [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:46887

• task_queues.js:86 processTicksAndRejections
  internal/process/task_queues.js:86:5

[IadityaM]

Already tried adding ad removing core-js@2 and core-js@latest

deleted node_modules, .cache, package-lock.json and yarn.lock
and re-installed packages. The error remains the same.

[DSchau]

Sorry about this!

Could you provide a reproduction? It will drastically speed up the time we can check things out and find a fix!

[adelin-b]

I just had the same error, I needed to remove core-js that I just installed because firebase was missing it and it fixed it. But now I cannot use firebase

[simoneb]

This bug appeared multiple times in the past, see #7862 and #12744. The solution for me was this one. But I shall say, these random issues appear quite frequently and it's scary to think that at any time the CI/CD pipeline can break for obscure reasons and no changes to the code except for a slightly loose versioning scheme.

I tend to prefer to avoid strict package versioning in the applications I write, to allow getting fixes and improvements from package authors, but gatsby is not very friendly in that sense.

[VallyPepyako]

The solution for me was this one.

Yep, it's helpful for fix dev/build pipeline, but firebase didn't want work with core-js@2

[adelin-b]

No solution work for me with minimal absolute minimal config on hello-world gatsby example (just importing firebase)

"dependencies": {
    "core-js": "3",
    "firebase": "^5.9.3",
    "gatsby": "^2.3.15",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },

give

info bootstrap finished - 29.790192699 s

error There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html


  WebpackError: Cannot find module 'core-js/modules/es6.object.assign'


  - index.js:23 Function.Module._load
    [lib]/[object-assign]/index.js:23:1

and

dependencies": {
    "core-js": "2",
    "firebase": "^5.9.3",
    "gatsby": "^2.3.15",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },

give

 WAIT  Compiling...                                                                                      2:40:37 AM

ℹ ｢wdm｣: Compiling...
 ERROR  Failed to compile with 7 errors                                                                  2:40:37 AM

These dependencies were not found:

* core-js/features/array/find in ./node_modules/@firebase/polyfill/dist/index.esm.js
* core-js/features/array/find-index in ./node_modules/@firebase/polyfill/dist/index.esm.js
* core-js/features/object/assign in ./node_modules/@firebase/polyfill/dist/index.esm.js
* core-js/features/string/repeat in ./node_modules/@firebase/polyfill/dist/index.esm.js
* core-js/features/string/starts-with in ./node_modules/@firebase/polyfill/dist/index.esm.js
* core-js/features/symbol in ./node_modules/@firebase/polyfill/dist/index.esm.js
* core-js/features/symbol/iterator in ./node_modules/@firebase/polyfill/dist/index.esm.js

[adelin-b]

I should add that reverting to gatsby@2 is not helping, neither firebase@5

[warrenwchan]

also having the same issue. i wonder if this issue is caused because of firebase?

[VallyPepyako]

also having the same issue. i wonder if this issue is caused because of firebase?

I guess its something like deadlock, gatsby didn't work with core-js@3 firebase didn't work with @2 )

[hendra-go]

@VallyPepyako firebase < 5.9.0 still works with [email protected] my current solution regarding this problem is just downgrade firebase to version 5.9.0

[hendra-go]

@adberard

I should add that reverting to gatsby@2 is not helping, neither firebase@5

just remove node_modules folder and yarn install again should fix the problem.
Like i said above [email protected] still depends on [email protected]

If after run yarn install and still core-js@3 got installed, there must be some other library that you use is depends on core-js@3

@warrenwchan

also having the same issue. i wonder if this issue is caused because of firebase?

I think this problem is because of quite dramatic change between core-js@2 vs core-js@3

the key to fix this bug is in this link i guess https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md

the default gatsby @babel/preset-env is still use corejs: 2 instead of corejs: 3

[adelin-b]

@hendra-go Could you provide a minimal working package.json ? This is mine that doesnt work. (rm -Rf yarn.lock node_modules .cache; yarn; yarn develop)

"dependencies": {
    "core-js": "2.6.5",
    "firebase": "5.9",
    "gatsby": "2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },

[hendra-go]

@adberard

  "dependencies": {
    "firebase": "^5.9.0",
    "gatsby": "^2.3.15",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
}

should be enough, you don't need core-js as dependencies in your package.json, and as i mentioned above If after run yarn install and still core-js@3 got installed, there must be some other library that you use is depends on core-js@3

ahh.. i just realize why your package.json does not work, because u use "firebase": "5.9" and that would install the latest firebase v5.9.x, that is [email protected] which is use core-js@3

[adelin-b]

Okay I managed to make it work !

 "dependencies": {
    "firebase": "5.9.0",
    "gatsby": "^2.3.15",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },

(it doesnt work either when the ^ is in front tho)

[hendra-go]

@adberard if you still want to use the latest firebase you can do this:

// import * as firebase from `firebase/app`; replace this line with the line below.
import * as firebase from '@firebase/app'; 

as mentioned here

and i think it is ok to close this issue because like @simoneb said this issue is possibly duplicate of #7862 and #12744

[IadityaM]

Sorry about this!

Could you provide a reproduction? It will drastically speed up the time we can check things out and find a fix!

Reproduction link: https://github.com/myTDC/tdc-works/tree/corejs-bug

[IadityaM]

@adberard if you still want to use the latest firebase you can do this:

// import * as firebase from `firebase/app`; replace this line with the line below.
import * as firebase from '@firebase/app'; 

as mentioned here

and i think it is ok to close this issue because like @simoneb said this issue is possibly duplicate of #7862 and #12744

While i agree that the issues seems to be duplicate of the issues you've listed, there are still a few things made me file a new issue.

1. The solutions to the problems mentioned in those issues didn't work for the my code.
2. Those issues have been closed, and this particular combination of libraries may have led to another underlying issue to resurface with the newer releases.

I would be more than happy to have this issue closed once I find a solution that works.

[adelin-b]

Yes I actually sticked to firebase 5.9.0 but im unhappy with this solution also I dont know how to handle this use case :

import * as firebase from '@firebase/app';
import 'firebase/auth';

let auth: firebase.auth.Auth;

Namespace '"/home/adelin/Documents/bustr/bustr-site/node_modules/@firebase/app/dist/index"' has no exported member 'auth'.
without the @ importing firebase/auth doesnt assign its properties to the firebase object

[protoEvangelion]

I was still getting an error but this fixed it:

import { firebase } from '@firebase/app'
import 'firebase/auth'

No need to install core-js module.

[mesvil7]

I got the same issue without firebase and solved with [email protected] the 3.0 didn't work.

[dergroncki]

I got the same issue without firebase and solved with [email protected] the 3.0 didn't work.

Me too.

[broeker]

I found this page via Google when searching on this same error. In my case, I first encountered the error when trying to spin up a sample project from the Material UI/gatsby repo, and was not able to run gatsby develop due to this same error:

WebpackError: Cannot find module 'core-js/modules/es6.object.assign'

I found a similar starter kit on gatsbyjs.org that uses Material UI and clicked the "Try this starter" link to automatically spin up a Netlify build. The Netlify deploy fails with the exact same error (on a starter kit unrelated to the repo I am trying to run local.) See screenshot from Netlify deploy log:

On local development, it seems I am able to fix this by forcing an install of core-js version 2:

npm i core-js@^2.0.0

This allows me to run gatsby develop with no errors, but not sure what (if any) repercussions there may be from forcing that old version. (Presumably Gatsby is otherwise installing v3?)

Gatsby version: 2.5.12

[IadityaM]

I was still getting an error but this fixed it:

import { firebase } from '@firebase/app'
import 'firebase/auth'

No need to install core-js module.

Still getting the same error with gatsby develop command

[IadityaM]

I found this page via Google when searching on this same error. In my case, I first encountered the error when trying to spin up a sample project from the Material UI/gatsby repo, and was not able to run gatsby develop due to this same error:

WebpackError: Cannot find module 'core-js/modules/es6.object.assign'

I found a similar starter kit on gatsbyjs.org that uses Material UI and clicked the "Try this starter" link to automatically spin up a Netlify build. The Netlify deploy fails with the exact same error (on a starter kit unrelated to the repo I am trying to run local.) See screenshot from Netlify deploy log:

On local development, it seems I am able to fix this by forcing an install of core-js version 2:

npm i core-js@^2.0.0

This allows me to run gatsby develop with no errors, but not sure what (if any) repercussions there may be from forcing that old version. (Presumably Gatsby is otherwise installing v3?)

Gatsby version: 2.5.12

core-js@^2.0.0 isn't resolving it either.

[jjcav84]

I found this page via Google when searching on this same error. In my case, I first encountered the error when trying to spin up a sample project from the Material UI/gatsby repo, and was not able to run gatsby develop due to this same error:
WebpackError: Cannot find module 'core-js/modules/es6.object.assign'
I found a similar starter kit on gatsbyjs.org that uses Material UI and clicked the "Try this starter" link to automatically spin up a Netlify build. The Netlify deploy fails with the exact same error (on a starter kit unrelated to the repo I am trying to run local.) See screenshot from Netlify deploy log:

On local development, it seems I am able to fix this by forcing an install of core-js version 2:
npm i core-js@^2.0.0
This allows me to run gatsby develop with no errors, but not sure what (if any) repercussions there may be from forcing that old version. (Presumably Gatsby is otherwise installing v3?)
Gatsby version: 2.5.12

core-js@^2.0.0 isn't resolving it either.

you have to install [email protected] neither 2 nor 3 work only 2.6.5 at the moment
And sorry for the mixup

[mikenieva]

Hi!

Do anyone has a simple repository with the right dependencies for Firebase and Gatsby and implementing them?

I am sorry reopening this conversation but I could not solve this issue (I read all of your solutions) and I have tried everything.

[protoEvangelion]

@mikenieva Well not super simple, but here is an example of how we are using firebase auth with a React sign in component.

[duyet]

Hi!

Do anyone has a simple repository with the right dependencies for Firebase and Gatsby and implementing them?

I am sorry reopening this conversation but I could not solve this issue (I read all of your solutions) and I have tried everything.

Hi,

as https://github.com/firebase/firebase-js-sdk/issues/1668#issuecomment-481012412
you should npm install --save core-js@2 in your project to make sure gatsby is worked and import from @firebase instead of firebase

// import * as firebase from `firebase/app`; replace this line with the line below.
import * as firebase from '@firebase/app'; 

the folder structure looks like:

  --core-js (this is the core-js@2 for gatsby) 
  --@firebase
       --polyfill
           --node_modules
               --core-js (this is the core-js@3 for @firebase)