找不到模塊：錯誤：Package 路徑。 不從 package 導出

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;

找不到錯誤模塊：錯誤：Package 路徑。 沒有從 package C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase 導出（參見 C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase\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

您應該像下面這樣導入。 我從 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 3

如果您使用電子反應樣板，在webpack.config.renderer.dev.dll.ts中，從入口點刪除 firebase。 例如：

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

Answer 4

在您的 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;

在related.js 腳本中導入 Firestore 和 Firebase 如下：

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

Answer 5

你在const db = firebase.firestore();

它應該是const db = firebaseApp.firestore();

即使這樣做，您也會收到找不到模塊的錯誤。 您需要按以下方式導入

import firebase from 'firebase/compat/app';

import 'firebase/compat/firestore';

這對我有用，因為我有同樣的問題！

Answer 6

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

欲了解更多信息：- https://www.npmjs.com/package/firebase

它的工作謝謝

Answer 7

我注意到我正在將我的 firebase.ts 配置文件作為import db from "firebase" （絕對導入）

這里的問題是 webpack 是從 node_modules 引用"firebase" ，而不是從我的 firebase.ts 引用。 這就是它拋出該錯誤的原因。

我通過將我的 firebase 配置作為import db from "../../firebase"修復它，並且有效

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 版本 9 中使用 Firebase 版本 8 代碼，所以如果您想解決您的問題，您應該使用以下代碼安裝 Firebase 版本：

npm i firebase@8.2.3

Answer 11

目前Firebase提供Web SDK兩種變體。 因此，請確保您使用的是正確版本的 firebase 庫。 版本 9 firebase 庫被安排為獨立庫。 您的語法使用 firebase 版本 8。 版本 8 版本 9