[英]FireBase Package Path Error on React Project
I am building a React application, and am quite new to using firebase.我正在构建一个 React 应用程序,并且对使用 firebase 非常陌生。
I'am following a instagram clone tutorial, (Clever Programmer's version tutorial).我正在关注 Instagram 克隆教程(Clever Programmer's version tutorial)。 I am at the part of connecting the app to the post creation table, that includes 3 rows, caption, imageURL, and username.
我正在将应用程序连接到帖子创建表,其中包括 3 行、标题、imageURL 和用户名。 However I am met with this error:
但是我遇到了这个错误:
ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package /Users/user/node_modules/firebase (see exports field in /Users/user/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/user/Desktop/InstagramClone/instagram-clone/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.
import React, { useState, useEffect } from 'react';
import Post from './Post';
import './App.css';
import {db} from './firebase';
function App() {
{/* Setting Variables For Automatic Posts/Variable */}
const[posts, setPosts]= useState([]);
useEffect(()=> {
db.collection('posts').onSnapshot(snapshot => {
setPosts(snapshot.docs.map(doc => doc.data()));
})
}, []);
return (
<div className="app">
{/*HEADER */}
<div className ="app_header">
<img
className="app_headerimage"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
alt=""
/>
</div>
<h1> Feed</h1>
{
posts.map(post => (
<Post username={post.username} caption={post.caption} imageURL={post.imageURL}/>
))
}
</div>
);
}
export default App;
import firebase from "firebase";
const firebaseApp = firebase.initializeApp({
apiKey: "AIzaSyAnLtnIBO4tQGFB37ZK4yrC9_BeoEo543",
authDomain: "instagram-clone-22312.firebaseapp.com",
projectId: "instagram-clone-22312",
storageBucket: "instagram-clone-22312.appspot.com",
messagingSenderId: "230176338668",
appId: "1:220076398446:web:67197f2ib041b4c7e11e8r2",
measurementId: "L-J7N3NW2EFCW"
});
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export{db, auth, storage};
Heres my folder structure:这是我的文件夹结构:
Thank you!谢谢!
If using firebase modular version supporting tree shaking如果使用firebase模块化版本支持摇树
import { initializeApp } from "firebase/app";
import { getFirestore} } from "firebase/firestore";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);
If using typical namespace version (probably this une judging from your code)如果使用典型的命名空间版本(从你的代码来看可能是这个)
import firebase from "firebase/app";
import "firebase/firestore";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = firebase.firestore();
Important, as kentpickard said, firebase changed their api (for the better), I WOULDN'T recommend downgrading but instead learning to use the correct packages, with the new version you can use both, only thing changing is the way they are imported重要的是,正如 kentpickard 所说,firebase 改变了他们的 api (为了更好),我不建议降级,而是学习使用正确的包,新版本可以同时使用,唯一改变的是它们的导入方式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.