While attempting to set up a Discord sign-in page to test NextAuth on my website, I encountered the error
ReferenceError: ReadableStream is not definedAfter examining the stack trace, it seems to be related to how my packages are configured, but I'm struggling to pinpoint the exact issue.
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>
)}
</>
);
}