在 React 应用程序中导入 firebase 的 ESLint 问题

Question

我的文件开头有两个导入：

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

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

firebase.initializeApp(firebaseConfig);

但我收到 ESLint 错误：
Line 1:1: 'firebase/app' should be listed in the project's dependencies. Run 'npm i -S firebase/app' to add it import/no-extraneous-dependencies
Line 2:1: 'firebase/database' should be listed in the project's dependencies. Run 'npm i -S firebase/database' to add it import/no-extraneous-dependencies

我已经有 firebase 依赖项：
dependencies: { "firebase": "^8.4.1"}
在没有 ESLint 的情况下它可以正常工作。

应用了这个解决方案，但不幸的是它没有帮助：

"import/no-extraneous-dependencies": ["error", {
   "devDependencies": true}
]

Answer 1

如果您将 eslint-plugin-import 更新到 v2.23.4，您可能会发现此错误已得到修复。包解析算法最近出现了回归。

npm update eslint-plugin-import

Read more about the issue

Answer 2

我找到两个 solutions.Either 一个就可以解决问题。

现在要使用 firebase 的数据库，只需在 jsx 文件中编写即可：

从“firebase”导入 firebase；

添加到eslintjson文件：

"import/no-extraneous-dependencies": [
    "warn", {
        "bundledDependencies": false
    }
]

我想指出，应该写成“off”或“warn”而不是“error”。

在 React 应用程序中导入 firebase 的 ESLint 问题

ESLint issue in the importing firebase in React app

firebase

reactjs

eslint

firebase-realtime-database