如何解决Firebase导入错误？模块未找到问题排查

报错原因拆解 #

1. 使用 import {auth} from "./firebase" 时报错：

Module not found: Error: Can't resolve './firebase' in 'C:\Users\Zahraa\projects\netflix-build\src\Screens'

原因：当前文件位于src/Screens目录，./firebase指向的是Screens目录内的firebase.js，但你的自定义firebase.js实际在上级的src目录，路径层级写错了。

2. 使用 import {auth} from "../firebase" 时报错：

Module not found: Error: Package path . is not exported from package C:\Users\Zahraa\projects\netflix-build\node_modules\firebase...

原因：省略文件后缀后，打包工具误将../firebase识别为node_modules里的Firebase官方包，而非你自己编写的firebase.js文件。

解决步骤 #

1. 修正导入路径（核心解决方法） #

在导入路径后加上.js后缀，明确指向自定义文件：

import { auth } from "../firebase.js";

如果你的打包工具（如Webpack、Vite）已配置允许省略.js后缀，也可以用../firebase，但添加后缀能彻底避免和第三方包混淆。

2. 确认文件位置和拼写 #

• 检查firebase.js是否确实放在src根目录（与Screens目录同级）
• 确认文件名拼写正确，注意大小写（部分打包工具对文件名大小写敏感）

3. 可选：适配新版Firebase写法（避免后续兼容性问题） #

你当前使用的是Firebase旧版导入方式，v9+推荐模块化导入，可改成以下写法（不影响当前报错修复，但能适配新版本）：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyDMFs_i60UUWNutBKJVzBkZ2U5W93JCnoM",
  authDomain: "netflix-clone-18cc6.firebaseapp.com",
  projectId: "netflix-clone-18cc6",
  storageBucket: "netflix-clone-18cc6.appspot.com",
  messagingSenderId: "1000960928424",
  appId: "1:1000960928424:web:e10790f27d2d1fa9b1f09d",
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);

export { auth };
export default db;

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