reactjs - Firebase: Cannot use import statement outside a module and require is not defined

Question

I meet Cannot use import statement outside when use: import * as firebase from "firebase" and required is not defined when changing it to: const firebase = require("firebase"); The error comes in the file: firebase-messaging-sw.js

My structure folder is like this:
-app:
+firebase-messaging-sw.js
+push-notification.js
+index.js
+routes: => Account: => Login: => Login.js
-build:
+webpack.config.client.dev.js
-package.json
...


index.js:
import 'file-loader?name=firebase-messaging-sw.js!./firebase-messaging-sw.js';

Login.js:
import { initializeFirebase, getTokenFirebase } from "../../../push-notification"

React.useEffect(() => {
  initializeFirebase();
  getTokenFirebase();
 }, []);

push-notification.js:
import * as firebase from "firebase";

export const initializeFirebase = () => {
  var firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxxxx",
  databaseURL:
    "https://xxxxx.firebasedatabase.app",
  projectId: "xxxx",
  storageBucket: xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx",
  measurementId: "xxxx",
  };

if (firebase.default.apps.length === 0) {
  firebase.default.initializeApp(firebaseConfig);
 } else {
  firebase.default.app(); // if already initialized, use that one
 }
};

export const getTokenFirebase = async () => {
 const messaging = firebase.default.messaging();

 if ("serviceWorker" in navigator) {
   window.addEventListener("load", function () {
     navigator.serviceWorker
    .register("./firebase-messaging-sw.js")
    .then(function (registration) {
      console.log("Registration successful, scope is:", registration.scope);
      messaging
        .getToken({
          vapidKey:
            "xxxx",
          serviceWorkerRegistration: registration,
        })
        .then((currentToken) => {
          if (currentToken) {
            console.log("current token for client: ", currentToken);
            localStorage.setItem("registrationToken", currentToken);

            // Track the token -> client mapping, by sending to backend server
            // show on the UI that permission is secured
          } else {
            console.log(
              "No registration token available. Request permission to generate one."
            );

            // shows on the UI that permission is required
          }
        })
        .catch((err) => {
          console.log("An error occurred while retrieving token. ", err);
          // catch error while creating client token
        });
    })
    .catch(function (err) {
      console.log("Service worker registration failed, error:", err);
    });
  });
 }
};

firebase-messaging-sw.js:

import * as firebase from "firebase"; // This is where the error come!

var firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxxxx",
  databaseURL:
    "https://xxxxx.firebasedatabase.app",
  projectId: "xxxx",
  storageBucket: xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx",
  measurementId: "xxxx",
 };

 if (firebase.default.apps.length === 0) {
   firebase.default.initializeApp(firebaseConfig);
  } else {
   firebase.default.app(); 
  }

webpack.config.client.dev.js:
 plugins: [
   new OfflinePlugin({
     relativePaths: false,
     publicPath: '/',
     appShell: '/',
     ServiceWorker: {
        events: true,
        entry: path.join(process.cwd(), 'app/firebase-messaging-sw.js')
      },
    excludes: ['.htaccess'],
}),

I have no idea how this error comes, can someone give me some instructions?

标签： reactjs

Answer 1

您是否将 firebase 安装为 npm 模块？

npm install --save firebase

确保包存在于 package.json 文件中。只有这样您才能导入模块。

var firebase = require('firebase');
var app = firebase.initializeApp({ ... });