Firebase+ReactJS: 'importScripts' is not defined

Question

In my Firebase-message-sw.js:

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

// BG-4OSXtyPghJusRY97ROcRWcTnaa9gWGm1jIHRyfLdfiXhzoItl5QfkLxUbj9MytqwobDAUneyRm9FYq3xWuuc

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

firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('Received background message ', payload);

  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

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

I am getting the following error: 'importScripts' is not defined. I am trying to get the token, but one more error is happening in this line: getToken({messaging ,vapidKey: messageKey}) The error is: The script has an unsupported MIME type ('text/html').

Arunkumar09 · Accepted Answer · 2022-03-17 05:18:32Z

Better replace with this code, worked for me

// eslint-disable-next-line no-undef
importScripts("https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js");
// eslint-disable-next-line no-undef
importScripts("https://www.gstatic.com/firebasejs/9.6.8/firebase-messaging.js");
// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
// your firebaseConfig
};

// eslint-disable-next-line no-undef
firebase.initializeApp(firebaseConfig);

// Retrieve firebase messaging
// eslint-disable-next-line no-undef
const messaging = firebase.messaging();
// eslint-disable-next-line no-undef
messaging.onBackgroundMessage(function (payload) {
  console.log("Received background message ", payload);
  // dataHandler();
  // const notificationTitle = payload.notification.title;
  // const notificationOptions = {
  //   body: payload.notification.body,
  //   // icon: "./logo192.png",
  // };

  // // eslint-disable-next-line no-restricted-globals
  // return self.registration.showNotification(
  //   notificationTitle,
  //   notificationOptions
  // );
});

cpgade · Accepted Answer · 2022-03-17 05:29:56Z

0

Try directly importing the firebase packages

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

var firebaseConfig = {
apiKey: "*******************************",
authDomain: "********************",
projectId: "***************",
storageBucket: "**********",
messagingSenderId: "********",
appId: "**********************"
};

const fire = firebase.initializeApp(firebaseConfig);

export default fire;

answered Mar 17, 2022 at 5:29

cpgade

192 bronze badges

Collectives™ on Stack Overflow

Firebase+ReactJS: 'importScripts' is not defined

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related