Firebase-js-sdk: Dosn't work with core-js@3

[avblink]

Latest installation of nuxt uses core-js@3 where all references to es6 and es7 were consolidated into es.

Nuxt breaks after installing firebase npm package with errors like:
core-js/modules/es6.array.find in ./.nuxt/client.js

It is looking for es6 instead of es.

Downgrading core-js to version 2 is not an option for me.

Is there any other solution?

[google-oss-bot]

I found a few problems with this issue:

• I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
• This issue does not seem to follow the issue template. Make sure you provide all the required information.

[rommelpe]

Thanks for reporting, @avblink. It might be related to https://github.com/firebase/firebase-js-sdk/issues/2390. I have not used nuxt before, so I could be wrong. You may try to install Firebase services individually as mentioned here:

I fixed the problem by installing the individual services like:

yarn add @firebase/app
yarn add @firebase/firestore
yarn add @firebase/auth

I try to install all the @firebase services and the error didn't happen anymore.

[avblink]

Hi @rommelpe,

it is indeed related, however solutioins provided there did not work. :(

firebase is installed as individual services, just like you said:

import * as firebase from 'firebase/app'
import 'firebase/firestore'

[hsubox76]

One thing to note in that workaround is the @. Can you import from @firebase/app, etc.? It's different from firebase/app.

[avblink]

Hi @hsubox76,

this is what I did. Didn't work.

[hsubox76]

Are you npm/yarn installing firebase, or are you downloading it from the CDN (e.g. <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase.js">)?

If npm/yarn installing, can you npm install or yarn add just the packages you need as @firebase/[package]? If from the script tag, can you just include the script tags for the packages you need? Here's a list of the current package paths (see "components"): http://www.gstatic.com/firebasejs/releases.json

The reason I'm asking is that the CDN version includes polyfills which includes corejs. The npm/yarn version doesn't import the @firebase/polyfill package but it includes it as a dependency, so when you install firebase, the @firebase/polyfill version of corejs will be in your node_modules folder and could possibly conflict in some way.

Edit: If yarn/npm installing, make sure to clear node_modules/ after this or at least make sure to uninstall @firebase/polyfill.

Edit 2: If all that doesn't work, one more question, what version of Firebase are you using?

[avblink]

Here is what I've just tested:

• installed default nuxt install.
• yarn add @firebase/app @firebase/firestore
• created firebase.js file with the code below
• included firebase.js file on the index.vue page
• all works
• checked core-js version, it is @2.6.11 instead of @3.6.4.
• @firebase downgrades core-js to version 2
• upgrading to version 3 throws errors mentioned in the head of this thread.

My understanding is that firebase, as it stands today, does not support core-js version 3?
Is the upgrade planned? Or should we downgrade default nuxt's core-js version?

import firebase from '@firebase/app'
import '@firebase/firestore'

if (!firebase.apps.length) {
  const config = {} //removed for security
  firebase.initializeApp(config)
}

export const db = firebase.firestore()
export default firebase

Thank you for looking into this.

[hsubox76]

I don't think this is a Firebase issue. I followed these steps without Firebase being involved:

• yarn create nuxt-app nuxt-test
• cd nuxt-test
• yarn dev
• Page runs fine
• If I inspect yarn.lock or node_modules/ I see core-js ~2.6 installed
• yarn upgrade core-js@latest (upgrade core js to 3)
• cd nuxt-test
• yarn dev
• I see errors like the one you reported.

The Nuxt default app doesn't seem to automatically come with core-js 3 as far as I can tell, it comes with 2? In order to add core-js 3, these seem to be the steps: https://nuxtjs.org/guide/release-notes#v2.6.0 . After I followed those steps, I didn't see the errors.

I installed firebase as well and didn't see any additional errors, but I wasn't able to include your firebase.js file in the running Nuxt app since I don't really know Vue or where to put JS files in this structure.

[bcnzer]

I had the same problem as the OP and explicitly downgraded to core-js 2.6.10. That got everything working but was always curious why it was a problem as older projects didn't have that issue.

The instructions in the nuxt js release notes worked! No more errors for me. https://nuxtjs.org/guide/release-notes#v2.6.0

As per the docs:

• Ran yarn add -D core-js@3 @babel/runtime-corejs3
• Added the babel nuxt.config.js, as per the above link

I'm not explicitly adding core-js to my project. Looking at the yarn-lock file I've got 3.6.2 and core-js@^2.6.5 listed. For fun, confirmed everything worked when I did explictly add 3.6.x.

Thank you @hsubox76

[rommelpe]

Haven’t heard from you in a while, @avblink. As part of the issue cleanup effort, I'd like to check if you are still having issues here.

This issue will auto-close in a couple days of no response. You can always reply on this thread to re-open the case.

[google-oss-bot]

Hey @avblink. We need more information to resolve this issue but there hasn't been an update in 7 days. I'm marking the issue as stale and if there are no new updates in the next 3 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[google-oss-bot]

Since there haven't been any recent updates here, I am going to close this issue.

@avblink if you're still experiencing this problem and want to continue the discussion just leave a comment here and we are happy to re-open this.