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

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 odo-list 导出 ode_modules irebase（请参阅 C:\Users\Sairam\Visual Code odo-list 中的导出字段 ode_modules irebase\package.json) 您的意思是“./firebase”吗？

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 };

Answer 2

如果您使用 electro-react-boilerplate，请在

webpack.config.renderer.dev.dll.ts

中从入口点删除 firebase。例如：

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

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';

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;

Answer 5

它不起作用，因为您在升级后的 Firebase version-9 中使用 Firebase version-8 代码，因此如果您想解决问题，您应该使用以下代码安装 Firebase version-8：

npm i [电子邮件受保护]

Answer 6

我注意到我将 firebase.ts 配置文件导入为

import db from "firebase"

（绝对导入）

这里的问题是 webpack 引用了来自 node_modules 的

"firebase"

，而不是我的 firebase.ts。这就是它抛出该错误的原因。

我通过将我的 firebase 配置导入为

import db from "../../firebase"

来修复它，并且有效

Answer 7

您误会了

const db = firebase.firestore();

应该是

const db = firebaseApp.firestore();

即使这样做之后，您也会收到找不到模块的错误。您需要按以下方式导入

import firebase from 'firebase/compat/app';

import 'firebase/compat/firestore';

这对我有用，因为我也遇到了同样的问题！！

Answer 8

也许我在使用 webpack 时遇到了同样的问题。 我通过设置 webpack/configuration/resolve/#resolveconditionnames

解决了问题

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);

Answer 10

目前，Firebase 提供两种 Web SDK 变体。因此，请确保您使用的是正确版本的 firebase 库。在版本 9 中，firebase 库被安排为独立的库。您的语法使用 firebase 版本 8。 版本 8 版本 9

Answer 11

您只需添加

import firebase from "firebase/compat/app" // It throws an error (Module not found)
import "firebase/compat/auth" //deafult : It automatically authenticate
import "firebase/compat/firestore" // To access firestore or this throws an error (firestore is not a function)

这是从 firebase v9 带来的修改。因此，从这个版本和以上版本中，您必须进行此更改 看起来像这样：

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"
};
  
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
  
export default db;

它对我有用！