500 Internal Server Error on Login page and Next Auth Pages

[sushilbalami]

Description 🐜

I just got error 500 when loading login pages and next-auth API routes I did all things correctly as I know all setup so.
before it, I hadn't experienced this error
on localhost working well but on vercel this error occurred.






so here is mine [...nextauth].js page

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export default NextAuth({
  session: {
    jwt: true,
  },
  jwt: {
    secret: process.env.JWT_SIGNING_SECRET_KEY,
    signingKey: process.env.JWT_SIGNING_PRIVATE_KEY,
  },
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    Providers.Facebook({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
      profile(profile) {
        return {
          id: profile.id.toString(),
          name: profile.name || profile.login,
          email: profile.email,
          image: profile.avatar_url,
        };
      },
    }),
    // Sign in with passwordless email link
    Providers.Email({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_SERVER_USER,
    }),
  ],
  callbacks: {
    async jwt(token, account, user, profile) {
      return token;
    },
    async session(session, token, user) {
      return session;
    },
  },
  pages: {
    signIn: "/login",
    verifyRequest: "/verify-request",
  },
  adapter: PrismaAdapter(prisma),
});

next.config.js

var path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const WebpackObfuscator = require("webpack-obfuscator");

module.exports = {
  reactStrictMode: false,
  images: {
    domains: [
      "images.unsplash.com",
      "i.ibb.co",
      "static.bcanepaltu.com",
      "bcanepaltu.com",
      "lh3.googleusercontent.com",
      "avatars.githubusercontent.com",
    ],
  },
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    if (!dev) {
      config.plugins.push(
        new WebpackObfuscator({
          rotateStringArray: true,
        })
      );

      config.plugins.push(
        new TerserPlugin({
          minify: TerserPlugin.terserMinify,
          terserOptions: {
            format: {
              comments: false,
            },
          },
          extractComments: false,
        })
      );
    return config;
  },
};

package.json

schema.prisma is copied from documentation
after deploying to vercel I got this error
on localhost working well

Is this a bug in your own project?

Yes

How to reproduce ☕️

Just deploy to vercel

Screenshots / Logs 📽

No response

Environment 🖥

System:
OS: Windows 10 10.0.19043
CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
Memory: 7.65 GB / 15.37 GB
Binaries:
Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.44)
Internet Explorer: 11.0.19041.1202
npmPackages:
next: 11.1.0 => 11.1.0
next-auth: ^3.29.0 => 3.29.0
react: ^17.0.2 => 17.0.2

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[balazsorban44]

You seem to be doing some funky stuff with the webpack config, I wonder if that plays a role.

Cannot find module styled-jsx/server has also nothing to do with next-auth

Could you try to create a minimal reproduction repository that reproduces this problem, so I can clone it and test it locally?

It's highly likely that this is not an error in next-auth but some kind of user config, so I converted it to a question. If somehow you can prove that this is a bug, I am happy to handle it as an actual issue.

[sushilbalami]

It's a private project but can share it with you personally if there are any means
and yes I had shared the above webpack stuff.
just minified js and ossification that could bring it ?

[balazsorban44]

Not sure what WebpackObfuscator does really, it was just a guess. I don't need the whole project, you can try to create a public reproduction. A repo with a minimal number of changes that still reproduces your issue.

We provide CodeSandbox templates to make it super easy. You might have seen them if you filled out the bug report form carefully, but decided to skip it for some reason 😉 :

JavaScript: https://codesandbox.io/s/next-auth-example-1kktb
TypeScript: https://codesandbox.io/s/next-auth-typescript-example-se32w

Remember, the more info you give us, the easier it is for us to help you. You can help the most with a reliable reproduction.