next.js - Problem with NextAuth when building NextJS project - Stack Overflow

admin管理员组

文章数量:1277886

"next": "^15.1.4",
"next-auth": "^4.24.11",

Current problem doesn't appear on dev. It happens during execution next build. Building process crashes with error.

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
   Collecting page data  ..TypeError: c is not a function
    at 6105 (C:\AssetFlow\app\.next\server\app\api\auth\[...nextauth]\route.js:1:1383)

The main suspect is this file (route.js).

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import GitHubProvider from "next-auth/providers/github";

const handler = NextAuth({
    providers: [
        FacebookProvider({
            clientId: process.env.FACEBOOK_CLIENT_ID,
            clientSecret: process.env.FACEBOOK_CLIENT_SECRET
        }),
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET
        }),
        GitHubProvider({
            clientId: process.env.GITHUB_CLIENT_ID,
            clientSecret: process.env.GITHUB_CLIENT_SECRET
        }),
    ],
    callbacks: {
        async session({ session }) {
            return session;
        },
        async signIn({ profile }) {
            try {
                if (profile?.["email"]) {
                    return true;
                }
                return false;
            } catch (error) {
                return false;
            }
        },
    }

});

export { handler as GET, handler as POST };

If I disable minification for the build, the error will be TypeError: facebook is not a function. I even tried to run the output route.js from .next\server\app\api\auth\[...nextauth]\route.js directly in NodeJS with debugger on, so I can see that facebook is indeed not a function, but an object {__esModule: true, default: ƒ}.

So, the reason for the error is that NextJS bundler can't bundle auth providers properly.

How can I fix that?

"next": "^15.1.4",
"next-auth": "^4.24.11",

Current problem doesn't appear on dev. It happens during execution next build. Building process crashes with error.

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
   Collecting page data  ..TypeError: c is not a function
    at 6105 (C:\AssetFlow\app\.next\server\app\api\auth\[...nextauth]\route.js:1:1383)

The main suspect is this file (route.js).

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import GitHubProvider from "next-auth/providers/github";

const handler = NextAuth({
    providers: [
        FacebookProvider({
            clientId: process.env.FACEBOOK_CLIENT_ID,
            clientSecret: process.env.FACEBOOK_CLIENT_SECRET
        }),
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET
        }),
        GitHubProvider({
            clientId: process.env.GITHUB_CLIENT_ID,
            clientSecret: process.env.GITHUB_CLIENT_SECRET
        }),
    ],
    callbacks: {
        async session({ session }) {
            return session;
        },
        async signIn({ profile }) {
            try {
                if (profile?.["email"]) {
                    return true;
                }
                return false;
            } catch (error) {
                return false;
            }
        },
    }

});

export { handler as GET, handler as POST };

If I disable minification for the build, the error will be TypeError: facebook is not a function. I even tried to run the output route.js from .next\server\app\api\auth\[...nextauth]\route.js directly in NodeJS with debugger on, so I can see that facebook is indeed not a function, but an object {__esModule: true, default: ƒ}.

So, the reason for the error is that NextJS bundler can't bundle auth providers properly.

How can I fix that?

• next.js
• next-auth

Share Improve this question Follow asked Feb 23 at 22:01 splash27splash27 2,10766 gold badges2626 silver badges5454 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Alright, I found the workaround.

1. Delete "type": "module", from package.json.
2. If there are any imports in your next.config.mjs, then they should be done from .mjs files as well. For example, if you have import serverConfig from "./utils/serverConfig.js"; in your next.config.mjs then it should become import serverConfig from "./utils/serverConfig.mjs";. You have to rename imported files as well.
3. If you were importing the files from step 2 by name somewhere else, you will need to fix those imports as well.

Still feels like the problem initially is on the NextAuth side. I would expect those providers libraries to be bundled well like any other dependencies.

本文标签： nextjsProblem with NextAuth when building NextJS projectStack Overflow