Skip to content

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

Closed
@simeon9696

Description

@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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

    close