Firebase+ReactJS: 'importScripts' is not defined - reactjs

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').

Answer 1

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
// );
});

Answer 2

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;