如何修复 Firebase 9.0 导入错误?“尝试导入错误:‘firebase/app’不包含默认导出(作为‘firebase’导入)." [英] How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."
问题描述
我正在尝试在我的 React 应用程序中实现 firebase,但我的导入版本似乎已经过时.这是我的代码:
I am trying to implement firebase in my React application but it seems my version of importing is outdated. Here is my code:
import firebase from "firebase/app";
import "firebase/auth";
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
});
export const auth = app.auth();
export default app;
我已经用 process.env.REACT_APP_FIREBASE... 替换了我的配置键,因为它们存储在另一个本地 .env 文件中.我也尝试了不同的导入 firebase 的方法,但似乎大多数帖子都过时了.这是我得到的错误:
I've replaced my config keys with process.env.REACT_APP_FIREBASE... as they are stored in another local .env file. I've also tried different ways of importing firebase, but it seems most posts are outdated. This is the error I am getting:
./src/firebase.js尝试导入错误:firebase/app"不包含默认导出(作为firebase"导入).
./src/firebase.js Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').
我还有另一个用于 authContext 的文件,因此我需要在 firebase.js 文件中保留auth"关键字:
I also have another file for authContext so I will need to keep the 'auth' keyword in my firebase.js file:
import React, { useContext, useState, useEffect } from "react";
import { auth } from "../firebase";
const AuthContext = React.createContext();
export function useAuth() {
return useContext(AuthContext);
}
const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState();
function signup(email, password) {
return auth.createUserWithEmailAndPassword(email, password);
}
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((user) => {
setCurrentUser(user);
});
return unsubscribe;
}, []);
const value = {
currentUser,
signup,
};
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};
export default AuthProvider;
推荐答案
在第 9 版中,导入 firebase 的事情发生了一些变化,但无需降级到以前的版本,有一个兼容性"选项,因此可以在导入中使用/compat 文件夹,如下所示
With version 9 things changed a bit for importing firebase, but there is no need to downgrade to a previous version, there is a "compatibility" option so can use the /compat folder in your imports, like this
import firebase from 'firebase/compat/app';
来自 Firebase 升级指南:
From the Firebase upgrade guide:
为了在更新依赖项后保持代码正常运行从 v8 到 v9 beta,更改导入语句以使用compat"每个导入的版本.例如:
In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the "compat" version of each import. For example:
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
这篇关于如何修复 Firebase 9.0 导入错误?“尝试导入错误:‘firebase/app’不包含默认导出(作为‘firebase’导入)."的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!