从“next-auth/client”导入 { Provider as AuthProvider } 在 _app.js 中不起作用答案

【问题标题】：import { Provider as AuthProvider } from "next-auth/client" doesnt work in _app.js从“next-auth/client”导入 { Provider as AuthProvider } 在 _app.js 中不起作用
【发布时间】：2022-03-09 00:31:44
【问题描述】：

我在看这个视频：https://www.youtube.com/watch?v=uGhekiErHso&lc=UgxYeO4X60SBiKSTYyp4AaABAg.9WmWFhab7UX9WmzTutWP_V，在视频的第 39 分钟你可以看到_app.js 的认证部分。

当我import { Provider as AuthProvider } from "next-auth/client" 时出现以下错误：

找不到模块：包路径 ./client 未从包中导出 C:\Users\saeed\Amazon-starter-template-nextjs\node_modules\next-auth （请参阅中的导出字段 C:\Users\saeed\Amazon-starter-template-nextjs\node_modules\next-auth\package.json)

如果我将其更改为：import { Provider as AuthProvider } from "next-auth/react"; 我收到此错误：

服务器错误错误：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义它的文件，或者您可能混淆了默认值和命名进口。

【问题讨论】：

是的，在使用next-auth v4 时，您应该将导入更改为next-auth/react。对于第二个错误，请确保您正确导出了所有 React 组件。

标签： reactjs next.js next-auth

【解决方案1】：

next-auth/react 是正确的，/client 是 deprecated

后续错误看起来您没有导出函数/组件，您是否缺少文件中的导出？例如

export default MyApp

【讨论】：

在_app.js的脚本末尾存在：export default MyApp

【解决方案2】：

您需要更改导入。 Provider 在 v4.0 上重命名为 SessionProvider。

import { SessionProvider } from "next-auth/react";

您不再需要使用别名，因为 Provider 已重命名。 next-auth/client 已弃用，请改用 next-auth/react。

本教程的后续步骤也已过时。 useSession 挂钩已更新为返回一个对象。

应该是const { data: session } = useSession();，而不是const [session] = useSession()

之后，您可以轻松访问session.user.name

【讨论】：

【解决方案3】：

-首先你应该改变你的导入，如下所示。 Provider 在 v4.0 上重命名为 SessionProvider。

import { SessionProvider } from 'next-auth/react';

-其次，您应该像这样更改 _app.js 代码：

const MyApp = ({ Component, pageProps }) => {
  return (
    <SessionProvider session={pageProps.session}>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </SessionProvider>
  );
};

export default MyApp;

-最后使用这段代码来使用你的会话：

const { data: session } = useSession();

// use this code for print your data

session.user.name

【讨论】：