Firebase v9 and Nuxt 2.15.8 - SyntaxError: Cannot use import statement outside a module

[simeon9696]

I'm migrating my codebase to use the firebase version 9 SDK and started to get this error once I started using v9 firestore. I've already migrated the auth part of my project and that works perfectly.

I should note, this only happens when I'm statically generating my website (npm run generate) but not when building the site for SSR (npm run build). During development (npm run dev) I get no errors. The error turns up for every page that has to be generated. It seems to be referencing the messaging module but I'm not using messaging on every page. I've tried using "type": "module" in my package.json but that hasn't helped. See an example of the error below:

 ERROR   /faqs

C:\Users\simeon.ramjit\Documents\projects\covid19-tt\node_modules\@firebase\messaging\dist\index.sw.esm2017.js:1
import '@firebase/installations';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)    
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)     
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\simeon.ramjit\Documents\projects\covid19-tt\node_modules\@firebase\messaging-compat\dist\index.cjs.js:8:10)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)    
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)     
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\simeon.ramjit\Documents\projects\covid19-tt\node_modules\firebase\compat\messaging\dist\index.cjs.js:3:1)

plugins/firebase.js

import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
import 'firebase/compat/storage'
import 'firebase/compat/messaging'
import 'firebase/compat/functions'


/*********************************** VERSION NINE ********************************** */
import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore"

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: ''
};

let firebaseApp;

const apps = getApps();
if (!apps.length) {
  firebaseApp = initializeApp(firebaseConfig);
} else {
  firebaseApp = apps[0];
}

const db = getFirestore(firebaseApp, {});
const auth = getAuth(firebaseApp);

if(process.browser){
  const analytics = getAnalytics(); //enable analytics
}
/*********************************** END OF VERSION NINE ********************************** */


/*********************************** VERSION EIGHT ********************************** */
if(!firebase.apps.length){
    const config = {
        apiKey: '',
        authDomain: '',
        databaseURL: '',
        projectId: '',
        storageBucket: '',
        messagingSenderId: '',
        appId: '',
        measurementId: ''
    };
    firebase.initializeApp(config);
    
}


const fireDb = firebase.firestore();
const fireStorage =firebase.storage();
const fireFunctions =firebase.functions();

let fireMessage = '';
if(process.browser){

  if(firebase.messaging.isSupported()){
   
    fireMessage= firebase.messaging();
  }
  else{
      
    console.warn('[WARNING] Firebase Cloud messaging not supported');
  }

}
/*********************************** END OF VERSION EIGHT ********************************** */

export{fireMessage, fireDb, fireStorage, fireFunctions, auth, db}

I know this may/ may not be a firebase specific issue but I'd appreciate any assistance in getting it resolved.

Node version: 16.13.1
Nuxt version: 2.15.8
Firebase version: 9.6.1

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

[hsubox76]

Could be related to #5839 (comment)

[hsubox76]

Can you check something for me really quick, can you go into your project and open /node_modules/@firebase/messaging/sw/package.json and add "type": "module" there, and see if it fixes this issue? If so I'll make a fix in the source.

[simeon9696]

Hi @hsubox76 that didn't work. I got the same error.

[hsubox76]

One more guess, what if you change the extension of /node_modules/@firebase/messaging/dist/index.sw.esm2017.js to .mjs?

Also I don't think this is the cause of your problem, but isSupported() is an async function that returns a promise so you can't use it synchronously in an if statement like that. You'll have to await it or use a then().

If changing the extension doesn't work, can you provide a minimal reproduction of the issue and upload it to github, and I can try to work with it?

[simeon9696]

@hsubox76 Strange that it's async and hasn't given me an issue. Inserting that check was actually a patch for iOS safari about a year ago and it worked so I didn't think twice about it. I'll still fix it though, thanks!

To this issue at hand, should I leave "type":"module" in the package.json and change the file extension to .mjs or should I only change the file extension and leave the package.json as the original?

[simeon9696]

@hsubox76 I've tried both ways and both yielded the below error:

ERROR in ./node_modules/@firebase/messaging-compat/dist/esm/index.esm2017.js
Module not found: Error: Can't resolve '@firebase/messaging/sw' in 'C:\Users\simeon.ramjit\Documents\projects\covid19-tt\node_modules\@firebase\messaging-compat\dist\esm'
 @ ./node_modules/@firebase/messaging-compat/dist/esm/index.esm2017.js 5:0-61 77:15-34
 @ ./node_modules/firebase/compat/messaging/dist/index.esm.js
 @ ./plugins/firebase.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/.cache/nuxt/client.js

 FATAL  Nuxt build error                                                                                                                              21:45:47  

  at WebpackBundler.webpackCompile (node_modules\@nuxt\webpack\dist\webpack.js:2127:21)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async WebpackBundler.build (node_modules\@nuxt\webpack\dist\webpack.js:2076:5)
  at async Builder.build (node_modules\@nuxt\builder\dist\builder.js:327:5)
  at async ensureBuild (node_modules\@nuxt\cli\dist\cli-generate.js:145:3)
  at async Object.run (node_modules\@nuxt\cli\dist\cli-generate.js:283:7)
  at async NuxtCommand.run (node_modules\@nuxt\cli\dist\cli-index.js:413:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

[simeon9696]

Hi @hsubox76 I've created the minimal reproduction repo https://github.com/simeon9696/firebasev9-nuxt

The repo was created using the following steps:

1. npx create-nuxt-app firebase9-nuxt
2. npm install firebase
3. added plugins/firebase.js
4. added plugin directory to nuxt.config.js

You can replicate the error by running npm run generate which would generate the static site. Using npm run build for SSR doesn't give the error though.

[hsubox76]

Thanks, it seems like nuxt generate insists on using the Node cjs version of messaging-compat, which is unable to load messaging/sw, which is only available as ESM. I think I can create a cjs version of messaging/sw although it's a little odd because cjs implies a Node environment, which a service worker shouldn't and can't be running in. I guess Nuxt is trying to use Node to generate static pages which will actually eventually be viewed in a browser so it's okay?

I'll do a bit of double checking and then probably create a CJS version of messaging/sw and will update here.

[hsubox76]

I'm not totally certain how Nuxt's module resolution order works but I think that if we offer a Node ESM entry point for messaging-compat, which I'm planning to do as part of resolving #5839, Nuxt should use that entry point and thus be able to use the messaging/sw ESM build. I'll try that first, after the IDB version is updated, and then see if it works on the repro you provided.

[simeon9696]

@hsubox76 Thanks for the update!

[hsubox76]

Not able to create an ESM Node build for messaging for now but 9.6.3 has been published and contains a CJS build for messaging/sw and seems to fix the problem in the test repo you provided. Let me know if it works.

[simeon9696]

@hsubox76 Thank you so much! It's working now