React应用Firebase Auth报错:Cannot assign to read only property '_canInitEmulator'
解决Firebase Auth报错:Cannot assign to read only property '_canInitEmulator' of object '#'
React应用中使用Firebase身份验证,此前运行正常,现在登录/注册时出现如下错误:
Cannot assign to read only property '_canInitEmulator' of object '#
'
用户已确认auth对象已正确导出,相关代码如下:
相关代码
init.ts
import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; import { getFirestore } from "firebase/firestore"; const app = initializeApp({ apiKey: "AIzaSyBRPIzl7N-_zScT55HiM7UovWWIXsmTkoQ", authDomain: "bakery-59d9c.firebaseapp.com", projectId: "bakery-59d9c", storageBucket: "bakery-59d9c.appspot.com", messagingSenderId: "48986447422", appId: "1:48986447422:web:0afd00e42ebc06ab883b6f", }); export const auth = getAuth(app); export const firestore = getFirestore(app);
auth.ts
import { auth } from "./init"; import { createUserWithEmailAndPassword, signOut, signInWithEmailAndPassword, } from "firebase/auth"; export async function loginWithEmailAndPassword( email: string, password: string ) { try { const user = await signInWithEmailAndPassword(auth, email, password); return user; } catch (err: any) { throw new Error(err.message); } }
Login.tsx
async function login() { try { const loggedUser: any = await loginWithEmailAndPassword(email, password); setUser(loggedUser); toast.success("Logged in sucessfully", { position: "bottom-right", }); navigate("/"); } catch (err: any) { toast.error(err.message, { position: "bottom-right", }); console.log(err.message) } }
解决方案
- 统一Firebase模块版本:检查
package.json中所有firebase/*相关依赖的版本是否完全一致。比如firebase/app、firebase/auth、firebase/firestore必须使用相同版本号,版本不匹配是触发该错误的常见原因。 - 清理依赖缓存并重新安装:删除项目根目录下的
node_modules文件夹、package-lock.json(或yarn.lock),然后执行npm install(或yarn install)重新安装依赖,解决可能的依赖冲突问题。 - 避免重复初始化Auth实例:确保整个应用中只调用一次
getAuth(app),并通过单例方式导出(你的init.ts已经符合这个要求,检查其他代码文件是否有重复创建Auth实例的情况)。 - 检查Emulator配置(如果使用):如果你的项目配置了Firebase Emulator,确保没有在Auth实例初始化后重复设置模拟器相关属性,避免修改只读属性
_canInitEmulator。
内容的提问来源于stack exchange,提问作者Flavio Pinnelli
相关产品推荐
相关产品推荐

