React项目集成Firebase v9.1.3时出现模块找不到编译错误的求助

看起来你遇到的问题是因为Firebase 9.x版本采用了全新的模块化API，而你参考的教程应该是基于Firebase 8.x或更早的版本，两者的导入方式完全不兼容，这才导致了模块找不到的错误。

为什么会出现这个报错？ #

Firebase 9.x为了支持Tree-shaking（大幅减少打包体积），彻底改用了模块化的导入方式，不再支持import * as firebase from 'firebase'这种旧的命名空间导入逻辑。虽然你已经成功安装了firebase@9.1.3，但旧的导入路径在新版本中已经不存在了——这也是为什么你找不到firebase.js文件的原因，新版本的核心代码都被拆分到firebase/app这类子目录中。

解决方案有两种，你可以根据需求选择： #

方案1：使用Firebase 9.x原生模块化写法（推荐）

这是官方主推的方式，能最大化优化项目打包体积。修改你的导入和初始化代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 从firebase/app单独导入initializeApp方法
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: ".....",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "12456...",
  appId: "1:1.....:web:c......."
};

const app = initializeApp(firebaseConfig);

后续如果要使用Firebase的其他服务（比如Auth、Firestore），也需要单独导入对应的方法，例如：

// 导入Firestore服务的初始化方法
import { getFirestore } from 'firebase/firestore';
const db = getFirestore(app);

方案2：使用Compat兼容层（快速适配旧代码）

如果你不想大面积修改代码，想继续沿用教程里的写法，可以使用Firebase提供的兼容层，它允许你用旧的命名空间方式使用新版本Firebase：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 导入compat版本的firebase核心包
import firebase from 'firebase/compat/app';

const firebaseConfig = {
  apiKey: ".....",
  authDomain: "myapp.firebaseapp.com",
  projectId: "myapp",
  storageBucket: "myapp.appspot.com",
  messagingSenderId: "12456...",
  appId: "1:1.....:web:c......."
};

const app = firebase.initializeApp(firebaseConfig);
// 如果要使用其他服务，同样需要导入对应的compat版本，例如：
// import 'firebase/compat/auth';
// import 'firebase/compat/firestore';

额外说明 #

• 你执行find node_modules -name firebase*能找到结果是正常的，firebase包确实已经安装，只是文件结构和旧版本完全不同。
• 建议优先选择方案1，因为它是Firebase未来的发展方向，能获得更好的性能和更小的打包体积。

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