“ReadableStream is not defined” error when trying to sign in with Discord on NextAuth App

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.

Stack Trace Screenshot

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>
      )}
    </>
  );
}