Reactfire在Next.js/React应用中因导入错误失败的问题求助

问题场景 #

我在Next.js根布局中使用Reactfire的Provider包裹子组件，代码如下：

import './globals.css';
import { AuthProvider, FirebaseAppProvider } from 'reactfire';
import { auth, firebaseConfig } from '../config/firebase';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                <FirebaseAppProvider firebaseConfig={firebaseConfig}>
                    <AuthProvider sdk={auth}>
                        {children}
                    </AuthProvider>
                </FirebaseAppProvider>
            </body>
        </html>
    )
}

firebaseConfig配置无误，可通过firebase模块正常连接Firebase应用，但运行npm run dev时出现以下错误：

导入追踪请求模块：
../node_modules/reactfire/dist/index.js
./src/app/layout.tsx
- error ../node_modules/reactfire/dist/index.js
Attempted import error: 'createContext' is not exported from 'react' (imported as 'f').

已尝试更新npm、降级Reactfire版本、清理npm缓存、重新安装所有node_modules、遵循Reactfire文档的标准结构，问题仍未解决。

解决方案 #

1. 将RootLayout转为客户端组件 #

Next.js App Router中默认的RootLayout是服务器组件，而Reactfire的Provider依赖React Context（需在客户端环境运行）。在RootLayout文件顶部添加'use client'指令，将其转为客户端组件：

'use client';
import './globals.css';
import { AuthProvider, FirebaseAppProvider } from 'reactfire';
import { auth, firebaseConfig } from '../config/firebase';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <body>
                <FirebaseAppProvider firebaseConfig={firebaseConfig}>
                    <AuthProvider sdk={auth}>
                        {children}
                    </AuthProvider>
                </FirebaseAppProvider>
            </body>
        </html>
    )
}

2. 确认React与Reactfire版本兼容性 #

检查Reactfire的peerDependencies要求，确保React版本匹配：

• Reactfire v4.x 需要React 18.x及以上
• 若使用React 17.x，需降级到Reactfire v3.x

可通过执行npm ls react reactfire查看当前安装版本，或查看项目package.json中的依赖配置。

3. 彻底清理并重新安装依赖 #

删除node_modules、package-lock.json（或yarn.lock）后重新安装：

rm -rf node_modules package-lock.json
npm install

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