下一个身份验证类型错误： 使用会话提供程序时无法读取 null 的属性"useState"

Question

当我尝试在SessionProvider添加到我的NextJS应用程序，我得到TypeError: Cannot read property 'useState' of null错误。我不明白我该怎么做?我可以使用谷歌登录，没有任何问题。只有当我在SessionProvider提供程序中添加时，我才得到这个错误。

//_app.tsx

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}

//[…nextauth.js]

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
pages: {
signIn: "/auth/signin",
}
})

我还注意到，我的会话是一个空对象时，注销它。谢谢!

Answer 1

我以前也遇到过这种事。你可以试着写上"next-auth"; "^4.0.1"给你的"依赖"在package.json。

Answer 2

在我的案例中，我解决这个问题的方法是做两件事:

1. 我在我的"dependencies"在包装里。json文件

   "next-auth": "^4.22.1"

2. 我用以下代码行更新了npm和node:

   npm update npm update npm -g

当我重新启动服务器时，一切都运行正常。