Question

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

2022-01-05

7072

reactjs next.js next-auth

我正在观看此视频： https://www.youtube.com/watch?v=uGhekiErHso&lc=UgxYeO4X60SBiKSTYyp4AaABAg.9WmWFhab7UX9WmzTutWP_V ，在视频的第 39 分钟，您可以在 _app.js 中看到身份验证部分。

当我 import { Provider as AuthProvider } from "next-auth/client" 时，我得到了以下内容错误：

Module not found: Package path ./client is not exported from package C:\Users\saeed\Amazon-starter-template-nextjs\node_modules\next-auth (see exports field in C:\Users\saeed\Amazon-starter-template-nextjs\node_modules\next-auth\package.json)

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

Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Answer 1

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

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

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

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

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

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

Answer 2

next-auth/react 是正确的， /client 已弃用

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

export default MyApp

Answer 3

首先，您应该像下面这样更改导入。提供程序在 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