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

IadityaM commented 5 years ago

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:\devlibs\Node\node.EXE Yarn: 1.15.2 - D:\Dev\Libs\Yarn\bin\yarn.CMD npm: 6.9.0 - D:\devlibs\Node\npm.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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

warrenwchan commented 5 years ago

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

VallyPepyako commented 5 years ago

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 commented 5 years ago

@VallyPepyako firebase < 5.9.0 still works with core-js@2.6.5 my current solution regarding this problem is just downgrade firebase to version 5.9.0

hendra-go commented 5 years ago

@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 firebase@5.9.0 still depends on core-js@2.6.5

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 commented 5 years ago

@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 commented 5 years ago

@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 firebase@5.9.3 which is use core-js@3

adelin-b commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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.

The solutions to the problems mentioned in those issues didn't work for the my code.
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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

I got the same issue without firebase and solved with core-js@2.6.5 the 3.0 didn't work.

dergroncki commented 5 years ago

I got the same issue without firebase and solved with core-js@2.6.5 the 3.0 didn't work.

Me too.

broeker commented 5 years ago

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:

netlify

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 core-js@2.6.5 neither 2 nor 3 work only 2.6.5 at the moment And sorry for the mixup

mikenieva commented 5 years ago

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 commented 5 years ago

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

duyet commented 5 years ago

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:

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

gatsbyjs / gatsby