Question

无法在 Next.js 中将未定义或 null 转换为对象

2021-12-23

1459

javascript reactjs next.js next-auth

嘿，我正在使用 Next.js 和 next-auth 构建登录页面我还在 [...nextauth].js 中写入了提供程序数组。

但是当我运行代码（如下所示）时：-

import { getProviders, signIn } from "next-auth/react";

function Login({ providers }) {
  return (
    <div>
      <img src="/spot-it-aye.png" alt="" />

      {Object.values(providers).map((provider) => (
        <div key={provider.name}>
          <button
            onClick={() => signIn(provider.id, { callbackUrl: "/" })}>
            Login With {provider.name}
          </button>
        </div>
      ))}
    </div>
  );
}

export default Login;

export async function getServerSideProps() {
  let providers = await getProviders();

  return {
    props: {
      providers,
    },
  };
}

我得到了

errorImage

这是编译时的控制台

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error request to https://localhost:3000/api/auth/providers failed, reason: write 
EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\ws\deps\openssl\openssl\ssl\record\ssl3_record.c:332:
 {
  error: {
    message: 'request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n',
    stack: 'FetchError: request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n' +       
      '\n' +
      '    at ClientRequest.<anonymous> (E:\\Coding\\VSCode\\Next JS\\spotify-2.0\\node_modules\\node-fetch\\lib\\index.js:1461:11)\n' +
      '    at ClientRequest.emit (node:events:390:28)\n' +
      '    at ClientRequest.emit (node:domain:475:12)\n' +
      '    at TLSSocket.socketErrorListener (node:_http_client:447:9)\n' +
      '    at TLSSocket.emit (node:events:390:28)\n' +
      '    at TLSSocket.emit (node:domain:475:12)\n' +
      '    at emitErrorNT (node:internal/streams/destroy:157:8)\n' +
      '    at emitErrorCloseNT (node:internal/streams/destroy:122:3)\n' +
      '    at processTicksAndRejections (node:internal/process/task_queues:83:21)',
    name: 'FetchError'
  },
  path: 'providers',
  message: 'request to https://localhost:3000/api/auth/providers failed, reason: write EPROTO 12752:error:1408F10B:SSL routines:ssl3_get_record:wrong version number:c:\\ws\\deps\\openssl\\openssl\\ssl\\record\\ssl3_record.c:332:\n'
}

任何帮助都将不胜感激。注意：我尝试使用

Answer 1

我也遇到了同样的问题。我能够在 getServerSideProps 中获取提供程序对象，但它没有像在页面内那样向下传递。所以这与我的 _app.tsx 配置为接收 pageProps 有关。

我按照教程操作，下面是我的应用程序配置为接收页面道具的方式，这就是问题所在：

function MyApp({ Component, pageProps:{ session, pageProps} }: AppProps) {
    
    console.log(session);
    return (
        <SessionProvider session={session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp

我将应用程序功能更改为以下，这实际上确保了我的页面可以毫无问题地接收 pageProps ：

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <SessionProvider session={pageProps.session}>
            <Component {...pageProps} />
        </SessionProvider>
    )
}

export default MyApp

Answer 2

您能否发布您的 next.js 版本，因为 next-auth/react 实现会根据其版本而有所不同。

我怀疑您的本地主机上是否已经有另一个应用程序正在使用相同的端口号运行。或者您在 next.js 开发服务器上使用的是 https 而不是 http 。