reactjs - 无法将 firebase 导入到react.js 项目中。 "Module not found: Error: Package path . is not exported from package"

Question

我正在尝试将 firebase 实现到我的react.js 项目中。为了遵循说明，我目前使用的是 firebase 版本 7.15.5(至少我认为是因为我的两个 .json 文件都显示 firebase 7.15.5)，因此我的语法与说明相同。当我进入 npm start 我的 React 项目时，出现以下错误:

Failed to compile.

Module not found: Error: Package path . is not exported from package /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase (see exports field in /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase/package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/jasonvitalejr/react-app/grey-hackbu/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
assets by status 6.89 KiB [cached] 1 asset
assets by chunk 1.82 MiB (name: main)
  asset static/js/bundle.js 1.82 MiB [emitted] (name: main) 1 related asset
  asset main.c55928e95e4d10c4a055.hot-update.js 4.78 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
assets by path *.json 1 KiB
  asset asset-manifest.json 583 bytes [emitted]
  asset main.c55928e95e4d10c4a055.hot-update.json 442 bytes [emitted] [immutable] [hmr]
asset index.html 1.67 KiB [emitted]
Entrypoint main 1.82 MiB (1.8 MiB) = static/js/bundle.js 1.82 MiB main.c55928e95e4d10c4a055.hot-update.js 4.78 KiB 2 auxiliary assets
cached modules 1.64 MiB [cached] 243 modules
runtime modules 31.3 KiB 15 modules
./src/App.js 2.94 KiB [built] [code generated]

WARNING in src/App.js
  Line 1:27:  'useEffect' is defined but never used          no-unused-vars
  Line 4:10:  'db' is defined but never used                 no-unused-vars
  Line 8:17:  'setPosts' is assigned a value but never used  no-unused-vars

ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase (see exports field in /Users/jasonvitalejr/react-app/grey-hackbu/node_modules/firebase/package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/jasonvitalejr/react-app/grey-hackbu/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
 @ ./src/App.js 9:0-32
 @ ./src/index.js 7:0-24 11:33-36

webpack 5.65.0 compiled with 1 error and 1 warning in 644 ms

我是 Firebase 和 React 的新手，所以我不确定如何解释这一点。仅供引用，这是我正在使用的 firebase 配置文件:

import firebase from 'firebase';


const firebaseApp = firebase.initializeApp({
    apiKey: "AIzaSyATcQBcBVJAYZbn9EfKNq6DjXtFdx25tss",
    authDomain: "grey-hackbu.firebaseapp.com",
    projectId: "grey-hackbu",
    storageBucket: "grey-hackbu.appspot.com",
    messagingSenderId: "748662363480",
    appId: "1:748662363480:web:4faf4f4fcd12e0f20d012d",
    measurementId: "G-7GDWG2D6FF"
});

const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();


export {db, auth, storage}

当我运行 firebase - -V 时，它显示 10.0.1，但在我的两个 .json 文件中，它显示 7.15.5。我不认为这是一个问题，因为我最近刚刚返回到版本 7.15.5，并且在最新版本的 firebase 中遇到了相同的错误。

有人知道如何解决这个问题吗？

Answer 1

我遇到了同样的问题，我们使用旧版本的 firebase 和旧的语法，我通过使用 firebase 的新语法解决了这个问题，请按照以下步骤操作:

1. npm 我 firebase

2. npm i -g firebase-tools

3. 将您的代码替换为:

   import { initializeApp } from "firebase/app";
   import { getStorage } from "firebase/storage";
   import { getAuth, GoogleAuthProvider } from "firebase/auth";
   import { getFirestore } from "firebase/firestore/lite";
   
   const firebaseConfig = {
     apiKey: "AIzaSyATcQBcBVJAYZbn9EfKNq6DjXtFdx25tss",
     authDomain: "grey-hackbu.firebaseapp.com",
     projectId: "grey-hackbu",
     storageBucket: "grey-hackbu.appspot.com",
     messagingSenderId: "748662363480",
     appId: "1:748662363480:web:4faf4f4fcd12e0f20d012d",
     measurementId: "G-7GDWG2D6FF",
   };
   
   const app = initializeApp(firebaseConfig);
   const db = getFirestore(app);
   const auth = getAuth();
   const storage = getStorage(app);
   //const provider=new GoogleAuthProvider()
   
   export { db, auth, storage };