React项目导入Firebase.js报错Module not found，求解决方案

1. 核对文件路径与大小写 #

• 确认Body.js和Firebase.js的相对位置：
  • 若两者在同一目录，./Firebase路径可行，但要注意文件名大小写（Mac/Linux系统严格区分，比如实际是firebase.js就不能写Firebase.js）。
  • 若Firebase.js在上级目录，路径要改成../Firebase；如果Firebase.js在src根目录、Body.js在src/components下，同样用../Firebase。
  • 尝试加上扩展名：import { firebase } from './Firebase.js';，部分打包工具需要明确指定文件扩展名。

2. 修正导入导出的匹配方式 #

你的Firebase.js用的是命名导出：

export {firebase};

对应的导入必须用命名导入，而非默认导入：

// Body.js中修改导入语句
import { firebase } from './Firebase';

如果想使用默认导入（import firebase from './Firebase';），需要修改Firebase.js的导出逻辑：

// Firebase.js末尾改为默认导出
export default firebase;

3. 确认Firebase依赖安装正确 #

执行命令确保兼容版Firebase已安装：

npm install firebase@compat
# 或使用yarn
yarn add firebase@compat

4. 核对文件结构 #

如果你的文件结构类似以下示例：

src/
├── Firebase.js
└── components/
    └── Body.js

那么Body.js里的导入路径必须是../Firebase，而非./Firebase。

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