Firebase-js-sdk: Core-JS@3 breaks build

[Kosai106]

[REQUIRED] Describe your environment

• Gatsby version: 2.3.5
• Operating System version: macOS Mojave 10.14.3
• Browser version: Google Chrome 73.0.3683.86
• Firebase SDK version: 5.9.3
• Firebase Product: Firebase NPM package

[REQUIRED] Describe the problem

https://github.com/firebase/firebase-js-sdk/pull/1623 this PR broke any builds when used together with GatsbyJS, as Gatsby is relying on core-js@2

Steps to reproduce:

Use [email protected] with any version of gatsby.

Relevant Code:

CodeSandbox example: https://codesandbox.io/s/1rk9v5zll4

ERROR  Failed to compile with 7 errors

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

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[Feiyang1]

Sorry that it broke your build! Related issue on gatsby https://github.com/gatsbyjs/gatsby/issues/13213

I have not used gatsby before, so I could be wrong. Admittedly having 2 copies of different version of polyfills in the app is bad, but the bundler should be able to resolve the dependencies without a problem.

I followed gatsby quick start guide and added [email protected], the folder structure looks like:

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

So the dependency for @firbase/polyfill is present and the bundler should read the core-js@3 for polyfills imported by @firebase/polyfill. I don't know why gatsby is not doing it. I suggest following up with gatsby team in the issue I referenced earlier.

At the mean time, you can do the following instead, the scoped package doesn't include polyfills. You probably always want to do it since gatsby will include the polyfills for you.

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

And a side note - we are thinking to drop polyfills from firebase package completely in the future.

[Kosai106]

I've already seen that issue and tried the suggestions they offered but it would just cause other issues similar issues in my case.

That said however, your suggestion of importing directly from @firebase/app seems to have worked.

Thanks a lot for the swift response.