getMessaging failing - Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-messaging-sw.js:1:1)

Question

I'm trying to integrate firebase messaging into my NextJS web app but getting errors that potentially look like they're coming from the serverside. To get registrations working in _app.tsx I do the following:

  useEffect(() => {
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        const config = process.env.NEXT_PUBLIC_FIREBASE;
        navigator.serviceWorker.register("/firebase-messaging-sw.js?firebaseConfig=" + Buffer.from(config).toString('base64'), {
          type: 'module'
        }).then(
          function (registration) {
            console.log("Service Worker registration successful with scope: ", registration.scope);
          },
          function (err) {
            console.log("Service Worker registration failed: ", err);
          }
        );
      });
    }
  }, [])

Where NEXT_PUBLIC_FIREBASE is the firebase config object.

Then in public/firebase-messaging-sw.js I have this:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getMessaging } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-messaging.js";

const swScriptUrl = new URL(self.location);

const base64Config = swScriptUrl.searchParams.get('firebaseConfig')
let decoded = atob(base64Config);

const firebaseConfig = JSON.parse(decoded);
const app = initializeApp(firebaseConfig);


// Retrieve an instance of Firebase Messaging so that it can handle background
const messaging = getMessaging(app);

When getMessaging is called I get this error:

Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-messaging-sw.js:1:1)
index.esm2017.js?f614:823 Uncaught (in promise) FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:3000/firebase-cloud-messaging-push-scope') with script ('http://localhost:3000/firebase-messaging-sw.js'): ServiceWorker script evaluation failed (messaging/failed-service-worker-registration).
    at registerDefaultSw (index.esm2017.js?f614:823:1)
    at async updateSwReg (index.esm2017.js?f614:847:1)
    at async getToken$1 (index.esm2017.js?f614:910:1)
    at async FirebaseMessagingWeb.getToken (web.js?00d2:24:1)
registerDefaultSw @ index.esm2017.js?f614:823
Promise.then (async)
asyncGeneratorStep @ ios-notification.ts?89f7:2
_next @ ios-notification.ts?89f7:2
eval @ ios-notification.ts?89f7:2
eval @ ios-notification.ts?89f7:2
addListeners @ ios-notification.ts?89f7:4
eval @ notification-context.tsx?dccb:38
Promise.then (async)
registerForNotifications @ notification-context.tsx?dccb:37
registerForNotifications @ notification-context.tsx?dccb:62
onClick @ profile-box.tsx?a1b7:280
callCallback @ react-dom.development.js?ac89:4161
invokeGuardedCallbackDev @ react-dom.development.js?ac89:4210
invokeGuardedCallback @ react-dom.development.js?ac89:4274
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js?ac89:4288
executeDispatch @ react-dom.development.js?ac89:9038
processDispatchQueueItemsInOrder @ react-dom.development.js?ac89:9070
processDispatchQueue @ react-dom.development.js?ac89:9083
dispatchEventsForPlugins @ react-dom.development.js?ac89:9094
eval @ react-dom.development.js?ac89:9285
batchedUpdates$1 @ react-dom.development.js?ac89:26096
batchedUpdates @ react-dom.development.js?ac89:3988
dispatchEventForPluginEventSystem @ react-dom.development.js?ac89:9284
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js?ac89:6462
dispatchEvent @ react-dom.development.js?ac89:6454
dispatchDiscreteEvent @ react-dom.development.js?ac89:6427
firebase-messaging-sw.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-messaging-sw.js:1:1)

I've checked the config object and it definitely is correct and making it to the service worker (also tried just copying the config in to no avail).

Have tried getting this to work both locally and on a https server to no avail, I've also tried a none module import which produced the same error.

Try using importScripts to import the firebase-app and firebase-messaging scripts instead. — juliomalves
– juliomalves, Commented May 15, 2022 at 15:34
yep tried that (importScripts("gstatic.com/firebasejs/9.8.1/firebase-app.js");), got another error about import Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'gstatic.com/firebasejs/9.8.1/firebase-app.js' failed to load. — meds
– meds, Commented May 15, 2022 at 16:11
Are you properly adding the protocol in the URL, i.e. importScripts ("https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js")? — juliomalves
– juliomalves, Commented May 15, 2022 at 16:14
Yes, full URL - stackoverflow is just turning it into a link — meds
– meds, Commented May 16, 2022 at 11:18
can use importScripts("gstatic.com/firebasejs/9.8.1/firebase-app-compat.js"); — Warren
– Warren, Commented Jul 23, 2024 at 6:26

Maria Gálvez · Accepted Answer · 2022-05-25 09:54:30Z

4

The same thing happened to me, the first is to use importScripts , and the second is to downgrade to 8.0.0 and change the function calls a bit. As I show you below:

   importScripts("https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js");
   importScripts("https://www.gstatic.com/firebasejs/8.0.0/firebase-messaging.js");
    
    const swScriptUrl = new URL(self.location);
    
    const base64Config = swScriptUrl.searchParams.get('firebaseConfig')
    let decoded = atob(base64Config);
    
    const firebaseConfig = JSON.parse(decoded);
    const app = firebase.initializeApp(firebaseConfig);
    
    
    // Retrieve an instance of Firebase Messaging so that it can handle background
    const messaging = firebase.messaging();

answered May 25, 2022 at 9:54

Maria Gálvez

3071 gold badge2 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MTK Over a year ago

+1 you have saved my life. I lost a whole day trying with version 9.15.0 (Gracias yo tambien vivo en Madrid)

Josh · Accepted Answer · 2023-03-24 07:05:02Z

2

This work for me

importScripts(
  'https://www.gstatic.com/firebasejs/9.18.0/firebase-app-compat.js'
);
importScripts(
  'https://www.gstatic.com/firebasejs/9.18.0/firebase-messaging-compat.js'
);

var FIREBASE_CONFIG = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "...",
};

// Initialize Firebase
firebase.initializeApp(FIREBASE_CONFIG);
const messaging = firebase.messaging();

answered Mar 24, 2023 at 7:05

Josh

311 bronze badge

Comments

Đođe Sajlović · Accepted Answer · 2024-06-03 16:08:48Z

The current newest importScripts firebase with firebase-messaging-sw.js using Next.js + next-pwa, is working for me on Windows and Android out of the box. For macOS, you need to enable Chrome notifications in the System Preferences. Note: I haven't tested iOS yet, but it should work. I hope it helps someone. Good luck

//public/firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/10.10.0/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.10.0/firebase-messaging-compat.js');


firebase.initializeApp({
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
});

// firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
    console.log(
        "[firebase-messaging-sw.js] Received background message ",
        payload
    );
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body,
        icon: payload.notification.image,
    };

    self.registration.showNotification(notificationTitle, notificationOptions);
});

Collectives™ on Stack Overflow

getMessaging failing - Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-messaging-sw.js:1:1)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related