the-road-to-react-with-firebase/react-gatsby-firebase-authentication

ERROR in ./node_modules/@firebase/polyfill/dist/index.esm.js

talkaboutdesign opened this issue · 24 comments

talkaboutdesign commented

Tried using this and get the following errors.

Module not found: Error: Can't resolve 'core-js/features/symbol/iterator' in '/Users/max/Documents/Developer/Gatsby/playground/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/@firebase/polyfill/dist/index.esm.js 9:0-42
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/Layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.
yellodev commented

Same for me !

MJChku commented

same

rwieruch commented

Can you try npm install core-js@2?

yellodev commented

Yes i read this. .Seems to be a conflict between node(core-js@3) and firebase (core-js@2). I update when i try to npm install core-js@2

  • 👍3
  • 🚀1
rwieruch commented

Did it work?

yellodev commented

Nope.
But sorry i have to much work this week ... I don't have time to dig this.
Will try again next week.

MJChku commented

I have a solution， add @ when import firebase eg import “@firebase/app” . You can find my ewbsite(under branch firebase
) project for an example . Cheers!

  • 👍4
  • 🎉1
  • ❤️1
  • 🚀1
  • 👀3
Ej-leone commented

I

this works would you mind explaining why ?

higuitadiaz commented

Hi,
In my case I had the same issue but the problem was with Vue version for the followings packages:
I was using the the version 2.6.4 for

"vue": "^2.6.4",
"vue-server-renderer": "^2.6.4",
"vue-template-compiler": "2.6.4",

I update to 2.6.10

"vue": "^2.6.10",
"vue-template-compiler": "2.6.10",

But I forget to update "vue-server-renderer" version. my solution was just up the version for this package

"vue-server-renderer": "^2.6.10",

According with the doc you need have to the same version if you are using Webpack.

mikenieva commented

Hi! I couldn't solve it. Could you please give more details how did you solve it?

higuitadiaz commented

Hi Mike, could you send the error ? Sometime we think that is the same error but most of the time change a bit details in the msg.

However check that you have installed '@firebase/polyfill' and 'core-js'

mikenieva commented

Sure. @higuitadiaz

I am trying to run the project but I always get this error:


success open and validate gatsby-configs — 0.010 s
success load plugins — 0.064 s
success onPreInit — 0.009 s
success initialize cache — 0.019 s
success copy gatsby files — 0.178 s
success onPreBootstrap — 0.009 s
success source and transform nodes — 0.024 s
success building schema — 0.171 s
success createPages — 0.000 s
success createPagesStatefully — 0.092 s
success onPreExtractQueries — 0.000 s
success update schema — 0.039 s
success extract queries from components — 0.122 s
success run static queries — 0.002 s
success run page queries — 0.048 s — 8/8 170.63 queries/second
success write out page data — 0.018 s
success write out redirect data — 0.004 s
success onPostBootstrap — 0.000 s

info bootstrap finished - 5.165 s

 ERROR  Failed to compile with 7 errors                                                                                                              8:22:37 PM

These dependencies were not found:

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

To install them, you can run: npm install --save core-js/features/array/find core-js/features/array/find-index core-js/features/object/assign core-js/features/string/repeat core-js/features/string/starts-with core-js/features/symbol core-js/features/symbol/iterator
error ✖ ｢wdm｣:
ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 3:0-37
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/admin.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find-index' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 4:0-43
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/admin.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/object/assign' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 5:0-40
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/admin.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/string/repeat' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 7:0-40
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/admin.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/string/starts-with' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 6:0-45
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/admin.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/symbol' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 8:0-33
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/admin.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/symbol/iterator' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 9:0-42
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/admin.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
info ℹ ｢wdm｣: Failed to compile.
 WAIT  Compiling...                                                                                                                                  8:22:37 PM

info ℹ ｢wdm｣: Compiling...
 ERROR  Failed to compile with 7 errors                                                                                                              8:22:37 PM

These dependencies were not found:

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

To install them, you can run: npm install --save core-js/features/array/find core-js/features/array/find-index core-js/features/object/assign core-js/features/string/repeat core-js/features/string/starts-with core-js/features/symbol core-js/features/symbol/iterator
error ✖ ｢wdm｣:
ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 3:0-37
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/array/find-index' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 4:0-43
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/object/assign' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 5:0-40
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/string/repeat' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 7:0-40
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/string/starts-with' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 6:0-45
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/symbol' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 8:0-33
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js
Module not found: Error: Can't resolve 'core-js/features/symbol/iterator' in '/Users/mikenieva/hola9/react-gatsby-firebase-authentication/node_modules/firebase/node_modules/@firebase/polyfill/dist'
 @ ./node_modules/firebase/node_modules/@firebase/polyfill/dist/index.esm.js 9:0-42
 @ ./node_modules/firebase/app/dist/index.cjs.js
 @ ./src/components/layout.js
 @ ./src/pages/account.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi event-source-polyfill (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
info ℹ ｢wdm｣: Failed to compile.
higuitadiaz commented

@mikenieva do you have configured the core-js in your package.json? if don't have installed in you project,, please make sure you have installed this pack, this should solve your problem.

Use npm i -save core-js to install as a dependence... not install as a devDependence

mikenieva commented

@higuitadiaz Sure. It's installed. This is my package.json. I don't know if I have to configure something else.

Thank you for your responses.

{
  "name": "react-gastby-firebase-authentication",
  "description": "Gatsby hello world starter",
  "scripts": {
    "develop": "gatsby develop",
    "start": "npm run develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "firebase": "^5.6.0",
    "gatsby": "^2.0.33",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "recompose": "^0.30.0"
  }
}
higuitadiaz commented

Ok @mikenieva, my suggestion update the core-js version to 3.0.1 and up the firebase version to 5.11.1, both are the latest version.

It's possible that with the firebase's latest version you need add the pack "@firebase/polyfill": "0.3.13" and "promise-polyfill": "8.1.0" but try without this firstly

  • 👍2
mikenieva commented

@higuitadiaz Now I get this error:

   9 | var getOwnPropertySymbols = Object.getOwnPropertySymbols;
  10 | var hasOwnProperty = Object.prototype.hasOwnProperty;
> 11 | var propIsEnumerable = Object.prototype.propertyIsEnumerable;
     | ^
  12 |
  13 | function toObject(val) {
  14 |  if (val === null || val === undefined) {


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

  - index.js:11 Function.Module._resolveFilename
    [lib]/[object-assign]/index.js:11:1


  - index.js:67 Module.require
    [lib]/[object-assign]/index.js:67:1

  - bootstrap:9 require
    lib/webpack/bootstrap:9:1

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

  - universalModuleDefinition:10 Object.<anonymous>
    lib/webpack/universalModuleDefinition:10:2

  - checkPropTypes.js:17 Module._compile
    [lib]/[prop-types]/checkPropTypes.js:17:1

  - checkPropTypes.js:28 Object.Module._extensions..js
    [lib]/[prop-types]/checkPropTypes.js:28:1

  - index.js:29 Module.load
    [lib]/[object-assign]/index.js:29:1

  - develop-static-entry.js:95 tryModuleLoad
    lib/.cache/develop-static-entry.js:95:5

  - develop-static-entry.js:86 Function.Module._load
    lib/.cache/develop-static-entry.js:86:5

  - index.js:67 Module.require
    [lib]/[object-assign]/index.js:67:1

  - bootstrap:9 require
    lib/webpack/bootstrap:9:1

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

I tried without the dependencies ("@firebase/polyfill": "0.3.13" and "promise-polyfill": "8.1.0") and with them.

{
  "name": "react-gastby-firebase-authentication",
  "description": "Gatsby hello world starter",
  "scripts": {
    "develop": "gatsby develop",
    "start": "npm run develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "@firebase/polyfill": "^0.3.14",
    "core-js": "3.0.1",
    "firebase": "5.11.1",
    "gatsby": "^2.0.33",
    "promise-polyfill": "^8.1.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "recompose": "^0.30.0"
  }
}
waleedshkt commented

Try updating the project dependencies to latest versions without installing polyfills:
npm install react@latest react-dom@latest gatsby@latest firebase@latest core-js@2.6.5 --save

recompose is at the latest version so no need to update it, But if installing dependencies for the first time then add it to get installed together with the rest of dependencies.

Make sure core-js is of version 2.6.5 not the latest v3 as there are compatibility issues with latest gatsby version. It's actually a bug in gatsby. Check out this issue

  • 👍3
mikenieva commented

I could solve it. It was a lot of research, but now I have the project up and running.

Thank you so much for the help. Sharing the important files:

package.json

{
  "name": "react-gastby-firebase-authentication",
  "description": "Gatsby hello world starter",
  "scripts": {
    "develop": "gatsby develop",
    "start": "npm run develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "babel-preset-gatsby": "^0.1.11",
    "core-js": "^2.6.5",
    "firebase": "^6.0.2",
    "gatsby": "^2.4.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "recompose": "^0.30.0"
  }
}

And I added a file .babelrc

.babelrc


{
    "presets": [
      "babel-preset-gatsby"
    ]
}
  • 🎉6
waleedshkt commented

I deleted my previous comment as I said couple of things wrong.

Glad it worked out, mate!

One thing though, as I realised now, if you are just adding babel-plugin-gatsby preset without adding any custom options like targets (basically telling babel which browsers to complile for), then there is no need I believe. Did you try buiding the project without babel preset?

And just pointing out from your package.json, the babel dependency is for development purposes only. So you should add in dev-dependencies (npm install ... --save-dev)

  • 👍1
rwieruch commented

Fixed over her #46 Can someone tell me if everything runs smoothly again with this change in place? :)

  • 👍1
  • 😄1
waleedshkt commented

@rwieruch
Mate, I am a bearded dude 🤣

  • 😄1
mikenieva commented

Fixed over her #46 Can someone tell me if everything runs smoothly again with this change in place? :)

It does. :)

rwieruch commented

Thanks everyone for helping out here! ❤️

  • 🚀1
jatin-maropost commented

Yes i read this. .Seems to be a conflict between node(core-js@3) and firebase (core-js@2). I update when i try to npm install core-js@2

I just updated the package of the Firebase from "firebase": "^8.2.6" to "firebase": "^8.4.1" and the error was gone.

Thank @MJChku for your answer.