react-firebaseui的StyledFirebaseAuth编译报错：'app'未从firebase/app导出

这个报错的核心原因是版本不匹配：你使用的react-firebaseui@4.1.0是为Firebase 7.x及以下版本设计的，而你安装的firebase@8.0.0重构了模块导入系统——从传统的默认导出改为了命名导出，导致旧版react-firebaseui内部的导入逻辑失效，从而抛出'app' is not exported from 'firebase/app'的错误。

下面提供两种可行的解决方案：

方案一：降级Firebase到兼容版本 #

将Firebase版本降级到7.x系列，确保和react-firebaseui 4.x兼容：

# 使用npm
npm install firebase@^7.24.0 --save

# 或者使用yarn
yarn add firebase@^7.24.0

降级后，你现有的代码不需要修改，就能正常运行。

方案二：升级react-firebaseui到适配Firebase 8.x的版本 #

react-firebaseui从5.x版本开始支持Firebase 8.x的新导入方式，先升级依赖：

# 使用npm
npm install react-firebaseui@^5.0.0 --save

# 或者使用yarn
yarn add react-firebaseui@^5.0.0

然后需要调整你的Firebase导入和初始化代码，适配Firebase 8.x的模块化API：

import React from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
// 使用Firebase 8.x的命名导入
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = { ... };
// 初始化Firebase app
const app = initializeApp(firebaseConfig);
// 获取auth实例
const auth = getAuth(app);

// 配置FirebaseUI
const uiConfig = {
  signInFlow: "popup",
  signInOptions: [GoogleAuthProvider.PROVIDER_ID],
};

export const SignInWith = () => (
  <>
    <p>Login</p>
    <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
  </>
);

这两种方案都能解决你遇到的导入错误，你可以根据项目需求选择其中一种。

内容的提问来源于stack exchange，提问作者skyraider