无法将未定义或 null 转换为 Next.js 中的 object

Question

Hey I am building a login page with Next.js and next-auth I have also written in providers array in [...nextauth].js .

But when I run the code (given below):-

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,
    },
  };
}

I get the

This is the console at compilation

[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'
}

Any help would be appreciated. Note: I tried using

Answer 1

From the look of the code you've supplied, providers is assigned only when the asynchronous call getProviders resolves.

This means that at runtime providers in Object.values(providers) is undefined .

In Login you can give provide a default until providers is actually available:
Login({ providers = {} })

Answer 2

Can you post your next.js version as next-auth/react implementation is different based on its version.

I doubt if there is already another application is running on your localhost with the same port number. Or you are using https instead of http for the next.js dev server.