模块未找到：错误：包路径“。”未从包中导出

Question

import firebase from 'firebase'
 
const firebaseConfig = {
  apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
  authDomain: "todo-app-e3cf0.firebaseapp.com",
  projectId: "todo-app-e3cf0",
  storageBucket: "todo-app-e3cf0.appspot.com",
  messagingSenderId: "940016886081",
  appId: "1:940016886081:web:91686613f16b1b1f8001c0",
  measurementId: "G-JHPC7TP12K"
};
  
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
  
export default db;

错误 未找到模块：错误：包路径 . 未从包C：\Users\Sairam\Visual Code\todo-list\node_modules\firebase（请参见C：\Users\Sairam\Visual Code\todo-list\node_modules\firebase\package.json中的导出字段） 你的意思是 './firebase' 吗？

- Sairam S

Answer 1

我相信Firebase最近进行了许多更新，所以您应该按照这种方式更新导入并且它会像魔法一样发挥作用。

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
  authDomain: "todo-app-e3cf0.firebaseapp.com",
  projectId: "todo-app-e3cf0",
  storageBucket: "todo-app-e3cf0.appspot.com",
  messagingSenderId: "940016886081",
  appId: "1:940016886081:web:91686613f16b1b1f8001c0",
  measurementId: "G-JHPC7TP12K"
};

// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { auth, db };

- Kesava Karri

---

是的，这对我有用。谢谢你的回答。我没有使用 import 'firebase/compat/firestore'。 - Erkam KUCET

我还需要添加：import 'firebase/compat/storage';因为我也在使用 Firebase 存储。 - Vaibhav Chobisa

Answer 2

如果您使用electron-react-boilerplate，在webpack.config.renderer.dev.dll.ts中，从入口点中删除firebase。例如：

  entry: {
    renderer: Object.keys(dependencies || {}).filter((it) => it !== 'firebase'),
  },

- asdacap

---

如果能指出要修改的确切文件而不仅仅是说要添加一个webpack设置，那么将会获得额外奖励。这对我很有用。 - Glenn

我在dll渲染器renderer[26]中遇到了这个错误。 找不到模块：错误：无法解析'react-firebase-hooks'，所以我将你的代码改成了renderer: Object.keys(dependencies || {}).filter((it) => !it.includes('firebase'))，然后它就正常工作了，谢谢。 - undefined

Answer 3

在 Firebase 配置文件中，按以下方式设置 Firebase：

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';

// Your web app's Firebase configuration
const config = {
  //your config json file
};


firebase.initializeApp(config);

export const firestore = firebase.firestore();


export default firebase;

在相关的 .js 脚本中，按照以下方式导入 Firestore 和 Firebase：

import {firestore as db}  from './firebase-config' 
import firebase from './firebase-config';

- Riolite

Answer 4

你应该像下面这样导入。我从Firebase文档中看到的：https://www.npmjs.com/package/firebase

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';

const firebaseConfig = {
  apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
  authDomain: "todo-app-e3cf0.firebaseapp.com",
  projectId: "todo-app-e3cf0",
  storageBucket: "todo-app-e3cf0.appspot.com",
  messagingSenderId: "940016886081",
  appId: "1:940016886081:web:91686613f16b1b1f8001c0",
  measurementId: "G-JHPC7TP12K"
};

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

export default db;

- msefer

---

我的屏幕出现了这个问题，变成了空白。我不知道这是什么意思！ - Neel gorasiya

Answer 5

由于您在升级到Firebase版本9后仍在使用Firebase版本8的代码，因此它无法正常工作。如果您想解决问题，您应该使用以下代码安装Firebase版本8：

npm i firebase@8.2.3

- EmrahKolemenoglu

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 6

我注意到我将firebase.ts配置文件作为import db from "firebase"（绝对导入）导入。

问题在于webpack引用了node_modules中的"firebase"，而不是我的firebase.ts。这就是它报错的原因。

我通过将我的firebase配置作为import db from "../../firebase"导入来解决了这个问题，并且它起作用了。

- adedaniel

Answer 7

在使用webpack的时候，我可能遇到了相同的问题。 但是我通过设置webpack/configuration/resolve/#resolveconditionnames解决了这个问题。

- bangxin

Answer 8

目前，Firebase 提供了两个 Web SDK 变体。因此，请确保您正在使用正确版本的 Firebase 库。从版本 9 开始，Firebase 库被安排为独立库。您的语法正在使用 Firebase 版本 8。 version-8 version-9

- Ozay Duman

Answer 9

就像在v-9.8.2中一样。这里是文档链接

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";

const firebaseConfig = {};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const firebaseAuth = getAuth(app);
export const fbDatabase = getDatabase(app);
export const fStore = getFirestore(app);
export const fStorage = getStorage(app);

- Tofazzal haque

Answer 10

你在 const db = firebase.firestore(); 上犯了一个错误。

应该改为 const db = firebaseApp.firestore();

即使这样做了，你仍然会得到模块未找到的错误。你需要按照以下方式导入:

import firebase from 'firebase/compat/app';

import 'firebase/compat/firestore';

我曾经遇到过同样的问题，这个方法对我有用！

- Neel gorasiya