【问题标题】：React w/ Firebase: Cannot use import statement outside a moduleReact w/ Firebase：不能在模块外使用 import 语句
【发布时间】：2021-07-05 15:51:31
【问题描述】：

我一直在关注this 使用 React 设置 Firebase 身份验证的教程。不幸的是，我在尝试设置 firebase 配置时已经遇到了问题。我有以下firebase.js 文件，就像在教程中一样：

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/firestore";

const firebaseConfig = {
  // I removed the configuration for security purposes
  apiKey: "xxx",
  authDomain: "xxx",
  databaseURL: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
  measurementId: "xxx"
};

firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const database = firebase.database();

const provider = new firebase.auth.GoogleAuthProvider();
export const signInWithGoogle = () => {
  auth.signInWithPopup(provider);
}

我启动了 React 应用程序，Google Chrome (!!!NOT REACT!!!) 在控制台中给了我以下错误：

好吧，让我们看看那是什么代码。
如您所见，这不是我的代码错误，而是 firebase 代码错误。这实际上是来自/node_modules/firebase/app/dist/index.esm.js 文件的代码。我尝试多次重新安装 firebase npm 包，我什至删除了节点模块文件夹，但似乎这是故意的。

我在谷歌浏览器中查看了我自己的代码，看看我使用的 import 语句发生了什么，你可以看到它们已更改为 webpack 要求语句，而 firebase 代码没有更改

非常感谢有关此错误发生原因和/或我如何解决此错误的任何帮助！

更新

这是我的package.json：

{
  "name": "react-app-test",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "electron": "^1.7.9",
    "electron-winstaller": "^5.0.0",
    "foreman": "^2.0.0",
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "@reach/router": "^1.3.4",
    "firebase": "^8.7.0",
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  },
  "homepage": "./",
  "main": "src/electron-starter.js",
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "dev": "nf start -p 3000"
  }
}

【问题讨论】：

你有没有看过这里的答案：stackoverflow.com/questions/58211880/…
尝试只导入firebase 而不是firebase/app，看看会发生什么。
@HarshithL 会导致同样的问题，但这次代码来自/node_modules/firebase/dist/index.esm.js
@iLuvLogix 这些答案主要用于导入带有脚本标签的 firebase，但不幸的是，npm 模块的答案并没有改变。
我更新了问题以包含我的 package.json

标签： javascript reactjs firebase npm

【解决方案1】：

我通过简单地将我的 firebase 版本降级到版本 7.8.2 解决了这个问题，该版本与教程使用的版本相同。感觉这不应该是解决这个问题的方法，但它确实有效。

【讨论】：

好吧，至少你解决了你的问题；）