Sav*_*lou 5 firebase reactjs reactfire next.js react-context
我正在用我需要的 Reactfire 提供程序包装 Next 根布局的子级：
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 缓存，重新安装所有节点模块，并使用 Reactfire 文档给出的确切设置结构。
我遇到了同样的问题，并尝试降级到某个更高的版本，该版本提供了一些对此错误消息有用的提示。对我来说，问题是我正在FirebaseAppProvider应用程序的入口点中配置，就像您一样。但是，FirebaseAppProvider使用 useContext，这是客户端功能。这意味着该文件需要'use client'在文件顶部添加注释。
更复杂的是，您不能只点击'use client'文件的顶部layout.tsx（不记得确切的原因）。
我通过创建一个单独的组件解决了这个问题，Providers在该组件中放置FirebaseAppProvider并'use client'在文件顶部添加了注释，如下所示：
// app/providers.tsx
'use client' //<- REMEMBER THIS
import { FirebaseAppProvider } from 'reactfire'
export function Providers({ children }: { children: React.ReactNode }) {
const firebaseConfig = {
...
};
return (
<FirebaseAppProvider firebaseConfig={firebaseConfig}>
{children}
</FirebaseAppProvider>
)
}
然后，我可以在我的layout.tsx文件中使用它，如下所示：
//app/layout.tsx
import { Providers } from './providers'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Providers>
{children}
</Providers>
</body>
</html>
)
}
希望这可以帮助！
| 归档时间： |
|
| 查看次数： |
300 次 |
| 最近记录： |