尝试将firbase连接到reactjs项目模块时出错，错误如下

Question

正在开发一个React项目，我正在尝试与Firebase连接，我已经使用“npm i firebase”安装了firebase，并使用“npm i firebase-tools”安装了firebase-tools，路径也是正确的。定义路径没有问题。显示以下错误

./src/Feed/Feed.js 中的错误 11:0-28 找不到模块：错误：无法解析“./firebase” 'C:\Users\sami.ullah witterclone-app\src\Feed' 解析“C:\Users\sami.ullah witterclone-app\src\Feed”中的“./firebase” 使用描述文件：C:\Users\sami.ullah witterclone-app\package.json （相对路径：./src/Feed） 字段“浏览器”不包含有效的别名配置 使用描述文件：C:\Users\sami.ullah witterclone-app\package.json （相对路径：./src/Feed/firebase） 无扩展名 字段“浏览器”不包含有效的别名配置 C:\Users\sami.ullah witterclone-app\src\Feed irebase 不存在 .web.mjs

    Field 'browser' doesn't contain a valid alias configuration
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase.web.mjs doesn't exist
  .mjs
    Field 'browser' doesn't contain a valid alias configuration
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase.mjs doesn't exist
  .web.js
    Field 'browser' doesn't contain a valid alias configuration
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase.web.js doesn't exist
  .js
    Field 'browser' doesn't contain a valid alias configuration
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase.js doesn't exist
  .json
    Field 'browser' doesn't contain a valid alias configuration
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase.json doesn't exist
  .web.jsx
    Field 'browser' doesn't contain a valid alias configuration
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase.web.jsx doesn't exist
  .jsx
    Field 'browser' doesn't contain a valid alias configuration
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase.jsx doesn't existstrong text
  as directory
    C:\Users\sami.ullah\twitterclone-app\src\Feed\firebase doesn't exist

强调文字

---

---

import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"




const firebaseConfig = {
    apiKey: "AIzaSyBp9YOZK6bc-eQGHWBKXWEQs8WT2KoEez4",
    authDomain: "twitter-clone-b7238.firebaseapp.com",
    projectId: "twitter-clone-b7238",
    storageBucket: "twitter-clone-b7238.appspot.com",
    messagingSenderId: "698369009822",
    appId: "1:698369009822:web:4f8e4b9f933e33d6a8738f",
    measurementId: "G-99WWG2C63L"
  };

  firebase.initializeApp(firebaseConfig);
  const db= firebaseApp.firestore();
  const auth = firebase.auth();
  const provider = new firebase.auth.GoogleAuthProvider();
  const storage =firebase.storage();


  export { auth,provider,storage};
  export default db;

import Post from './Post'
import TweetBox from './TweetBox'
import {useState, useEffect} from "react";
import db from "./firebase"



function Feed() {
 const [posts,setPosts]=useState([])

    useEffect(()=>{
    db.collection('posts').onSnapshot((snapshot=>(
    setPosts(snapshot.docs.map(doc=>doc.data()))
    )))
},[])



return (
       <div className="feed">
            <div className="feed-header">
            <h3>Home</h3>  
            </div>
            <TweetBox/>
             

        {posts.map((post=>{
               <Post  
               displayName={post.displayName}
               userName={post.userName}
               verified={post.verified}
               text={post.text}
               image={post.image}
               avatar={post.avatar}


            />


                          }))}


       
       

    </div>
)

}

导出默认Feed

{
  "name": "twitterclone-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "@material-ui/core": "^4.12.3",
  "@material-ui/icons": "^4.11.2",
  "@testing-library/jest-dom": "^5.16.1",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
  "firebase": "^9.6.2",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-scripts": "5.0.0",
  "react-twitter-widgets": "^1.10.0",
  "web-vitals": "^2.1.2"
 },
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
"eslintConfig": {
     "extends": [
     "react-app",
     react-app/jest"
 ]
},
   "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
   ],
     "development": [
      "last 1 chrome version",
      "last 1 firefox version",
    "last 1 safari version"
    ]
  }
}

Answer 1

根据docs，您需要像这样初始化firebase

const firebaseConfig = {
    //...
    };
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);