React项目引入firebase时触发import/no-extraneous-dependencies ESLint报错如何解决

报错根因 #

这个报错属于ESLint规则的误判：eslint-plugin-import 提供的 import/no-extraneous-dependencies 规则默认会把导入的完整路径（firebase/app、firebase/database）当做完整包名，去 package.json 的依赖列表中匹配，而你安装的是根包 firebase，没有单独安装这两个子路径对应的包，所以触发校验报错。firebase v8的包结构本身就支持这种子路径导入写法，因此关闭ESLint后代码可以正常运行。

你之前添加的规则没有生效，是因为 devDependencies: true 这个配置仅允许引入devDependencies里的包，没有解决子路径匹配的核心问题。

解决方案 #

有两种常用的处理方式：

方案1：修改全局ESLint规则，豁免对应路径校验

在原规则配置中增加 allowModules 字段，指定不需要校验的模块路径即可：

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

如果后续你还用到了firebase/auth、firebase/storage这类其他子模块，直接把对应路径加入allowModules数组即可。

方案2：单文件临时忽略规则

如果只有当前文件用到了firebase相关导入，不想修改全局规则，可以直接在文件头部加注释，忽略当前文件的这条规则校验：

/* eslint-disable import/no-extraneous-dependencies */
import firebase from "firebase/app";
import "firebase/database";

// 后续业务代码

内容的提问来源于stack exchange，提问作者kan