I tried to create a page where you can sign in with Discord just to test if NextAuth would work on my site and I'm getting ReferenceError: ReadableStream is not defined.
From what I can understand from the stack trace it looks to be an issue with how I have my packages configured but I can't figure it out from there.
package.json
{
"name": "tranqggnext",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@next-auth/prisma-adapter": "^1.0.5",
"@prisma/client": "^4.7.1",
"@svgr/webpack": "^6.2.1",
"axios": "^1.1.3",
"dayjs": "^1.11.6",
"googleapis": "^100.0.0",
"graphql": "^16.6.0",
"graphql-request": "^5.0.0",
"next": "12.0.9",
"next-auth": "^4.18.6",
"nextjs-redirect": "^6.0.1",
"nprogress": "^0.2.0",
"react": "17.0.2",
"react-datocms": "^3.1.1",
"react-dom": "17.0.2",
"sass": "^1.49.0",
"swiper": "^8.0.7"
},
"devDependencies": {
"babel-plugin-inline-react-svg": "^2.0.1",
"eslint": "8.8.0",
"eslint-config-next": "12.0.9"
}
}
page (admin.jsx)
import { useSession, signIn, signOut } from "next-auth/react";
export default function admin(props) {
const { data: session } = useSession();
return (
<>
{!session && (
<div>
<button onClick={() => signIn()}>Sign In</button>
</div>
)}
{session && (
<div>
<button onClick={() => signOut()}>Sign Out</button>{" "}
{session.user.name}
</div>
)}
</>
);
}
Just a quick note, I have just got a similar issue and in my case the following fixed my issue for now (instead of "next-auth": "^4.18.6", put the following in package.json).
"next-auth": "<4.18",