Error when building NextJS app: Collecting page data ..TypeError: c is not a function

[AlexanderPolenov]

Error only happens on npm run build. Everything is fine when I am running in dev mode.

package.json

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' NODE_ENV=development next dev --turbopack --experimental-https",
    "build": "cross-env NODE_ENV=production next build",
    "start": "cross-env NODE_ENV=production next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@aws-sdk/client-s3": "^3.726.1",
    "@aws-sdk/s3-request-presigner": "^3.726.1",
    "@babylonjs/viewer": "^7.43.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@fingerprintjs/fingerprintjs": "^4.5.1",
    "@mui/material": "^6.4.4",
    "bcrypt": "^5.1.1",
    "cross-env": "^7.0.3",
    "escape-html": "^1.0.3",
    "jose": "^5.9.6",
    "mysql2": "^3.11.5",
    "next": "^15.1.4",
    "next-auth": "^4.24.11",
    "next-intl": "^3.26.1",
    "nodemailer": "^6.10.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-icons": "^5.4.0",
    "react-spinners": "^0.15.0",
    "react-syntax-highlighter": "^15.6.1",
    "react-tooltip": "^5.28.0",
    "sequelize": "^6.37.5",
    "zod": "^3.24.1"
  },
  "devDependencies": {
    "pg-hstore": "^2.3.4",
    "postcss": "^8",
    "tailwindcss": "^3.4.17"
  }
}

npm run build output:

> [email protected] build
> cross-env NODE_ENV=production next build

   ▲ Next.js 15.1.4
   - Environments: .env.production

   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)
    at t (C:\AssetFlow\app\.next\server\webpack-runtime.js:1:128)
    at r (C:\AssetFlow\app\.next\server\app\api\auth\[...nextauth]\route.js:1:5579)
    at <unknown> (C:\AssetFlow\app\.next\server\app\api\auth\[...nextauth]\route.js:1:5617)
    at t.X (C:\AssetFlow\app\.next\server\webpack-runtime.js:1:2135)
    at <unknown> (C:\AssetFlow\app\.next\server\app\api\auth\[...nextauth]\route.js:1:5592)
    at Object.<anonymous> (C:\AssetFlow\app\.next\server\app\api\auth\[...nextauth]\route.js:1:5644)

> Build error occurred
[Error: Failed to collect page data for /api/auth/[...nextauth]] {
  type: 'Error'
}

\api\auth[...nextauth]\route.js content:

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

Beautified content of failing route.js:

(() => {
	var e = {};
	e.id = 1014, e.ids = [1014], e.modules = {
		10846: e => {
			"use strict";
			e.exports = require("next/dist/compiled/next-server/app-page.runtime.prod.js")
		},
		44870: e => {
			"use strict";
			e.exports = require("next/dist/compiled/next-server/app-route.runtime.prod.js")
		},
		3295: e => {
			"use strict";
			e.exports = require("next/dist/server/app-render/after-task-async-storage.external.js")
		},
		29294: e => {
			"use strict";
			e.exports = require("next/dist/server/app-render/work-async-storage.external.js")
		},
		63033: e => {
			"use strict";
			e.exports = require("next/dist/server/app-render/work-unit-async-storage.external.js")
		},
		12412: e => {
			"use strict";
			e.exports = require("assert")
		},
		79428: e => {
			"use strict";
			e.exports = require("buffer")
		},
		55511: e => {
			"use strict";
			e.exports = require("crypto")
		},
		94735: e => {
			"use strict";
			e.exports = require("events")
		},
		81630: e => {
			"use strict";
			e.exports = require("http")
		},
		55591: e => {
			"use strict";
			e.exports = require("https")
		},
		11723: e => {
			"use strict";
			e.exports = require("querystring")
		},
		79551: e => {
			"use strict";
			e.exports = require("url")
		},
		28354: e => {
			"use strict";
			e.exports = require("util")
		},
		74075: e => {
			"use strict";
			e.exports = require("zlib")
		},
		6105: (e, t, r) => {
			"use strict";
			r.r(t), r.d(t, {
				patchFetch: () => g,
				routeModule: () => f,
				serverHooks: () => m,
				workAsyncStorage: () => d,
				workUnitAsyncStorage: () => h
			});
			var o = {};
			r.r(o), r.d(o, {
				GET: () => l,
				POST: () => l
			});
			var s = r(42706),
				a = r(28203),
				i = r(45994),
				n = r(51825),
				u = r(28053),
				c = r(75402),
				p = r(7553);
			let l = n({
					providers: [c({
						clientId: process.env.FACEBOOK_CLIENT_ID,
						clientSecret: process.env.FACEBOOK_CLIENT_SECRET
					}), u({
						clientId: process.env.GOOGLE_CLIENT_ID,
						clientSecret: process.env.GOOGLE_CLIENT_SECRET
					}), p({
						clientId: process.env.GITHUB_CLIENT_ID,
						clientSecret: process.env.GITHUB_CLIENT_SECRET
					})],
					callbacks: {
						session: async ({
							session: e
						}) => e,
						async signIn({
							profile: e
						}) {
							try {
								if (e?.email) return !0;
								return !1
							} catch (e) {
								return !1
							}
						}
					}
				}),
				f = new s.AppRouteRouteModule({
					definition: {
						kind: a.RouteKind.APP_ROUTE,
						page: "/api/auth/[...nextauth]/route",
						pathname: "/api/auth/[...nextauth]",
						filename: "route",
						bundlePath: "app/api/auth/[...nextauth]/route"
					},
					resolvedPagePath: "C:\\AssetFlow\\app\\app\\api\\auth\\[...nextauth]\\route.js",
					nextConfigOutput: "",
					userland: o
				}),
				{
					workAsyncStorage: d,
					workUnitAsyncStorage: h,
					serverHooks: m
				} = f;

			function g() {
				return (0, i.patchFetch)({
					workAsyncStorage: d,
					workUnitAsyncStorage: h
				})
			}
		},
		96487: () => {},
		78335: () => {},
		13676: (e, t) => {
			"use strict";
			Object.defineProperty(t, "__esModule", {
				value: !0
			})
		},
		51825: (e, t, r) => {
			"use strict";
			Object.defineProperty(t, "__esModule", {
				value: !0
			});
			var o = {};
			Object.defineProperty(t, "default", {
				enumerable: !0,
				get: function() {
					return a.default
				}
			});
			var s = r(13676);
			Object.keys(s).forEach(function(e) {
				!("default" === e || "__esModule" === e || Object.prototype.hasOwnProperty.call(o, e)) && (e in t && t[e] === s[e] || Object.defineProperty(t, e, {
					enumerable: !0,
					get: function() {
						return s[e]
					}
				}))
			});
			var a = function(e, t) {
				if (e && e.__esModule) return e;
				if (null === e || "object" != typeof e && "function" != typeof e) return {
					default: e
				};
				var r = i(void 0);
				if (r && r.has(e)) return r.get(e);
				var o = {
						__proto__: null
					},
					s = Object.defineProperty && Object.getOwnPropertyDescriptor;
				for (var a in e)
					if ("default" !== a && ({}).hasOwnProperty.call(e, a)) {
						var n = s ? Object.getOwnPropertyDescriptor(e, a) : null;
						n && (n.get || n.set) ? Object.defineProperty(o, a, n) : o[a] = e[a]
					} return o.default = e, r && r.set(e, o), o
			}(r(64767));

			function i(e) {
				if ("function" != typeof WeakMap) return null;
				var t = new WeakMap,
					r = new WeakMap;
				return (i = function(e) {
					return e ? r : t
				})(e)
			}
			Object.keys(a).forEach(function(e) {
				!("default" === e || "__esModule" === e || Object.prototype.hasOwnProperty.call(o, e)) && (e in t && t[e] === a[e] || Object.defineProperty(t, e, {
					enumerable: !0,
					get: function() {
						return a[e]
					}
				}))
			})
		},
		75402: (e, t) => {
			"use strict";
			Object.defineProperty(t, "__esModule", {
				value: !0
			}), t.default = function(e) {
				return {
					id: "facebook",
					name: "Facebook",
					type: "oauth",
					authorization: "https://www.facebook.com/v11.0/dialog/oauth?scope=email",
					token: "https://graph.facebook.com/oauth/access_token",
					userinfo: {
						url: "https://graph.facebook.com/me",
						params: {
							fields: "id,name,email,picture"
						},
						async request({
							tokens: e,
							client: t,
							provider: r
						}) {
							var o;
							return await t.userinfo(e.access_token, {
								params: null === (o = r.userinfo) || void 0 === o ? void 0 : o.params
							})
						}
					},
					profile: e => ({
						id: e.id,
						name: e.name,
						email: e.email,
						image: e.picture.data.url
					}),
					style: {
						logo: "/facebook.svg",
						bg: "#006aff",
						text: "#fff"
					},
					options: e
				}
			}
		},
		7553: (e, t) => {
			"use strict";
			Object.defineProperty(t, "__esModule", {
				value: !0
			}), t.default = function(e) {
				return {
					id: "github",
					name: "GitHub",
					type: "oauth",
					authorization: {
						url: "https://github.com/login/oauth/authorize",
						params: {
							scope: "read:user user:email"
						}
					},
					token: "https://github.com/login/oauth/access_token",
					userinfo: {
						url: "https://api.github.com/user",
						async request({
							client: e,
							tokens: t
						}) {
							let r = await e.userinfo(t.access_token);
							if (!r.email) {
								let e = await fetch("https://api.github.com/user/emails", {
									headers: {
										Authorization: `token ${t.access_token}`
									}
								});
								if (e.ok) {
									var o;
									let t = await e.json();
									r.email = (null !== (o = t.find(e => e.primary)) && void 0 !== o ? o : t[0]).email
								}
							}
							return r
						}
					},
					profile(e) {
						var t;
						return {
							id: e.id.toString(),
							name: null !== (t = e.name) && void 0 !== t ? t : e.login,
							email: e.email,
							image: e.avatar_url
						}
					},
					style: {
						logo: "/github.svg",
						bg: "#24292f",
						text: "#fff"
					},
					options: e
				}
			}
		},
		28053: (e, t) => {
			"use strict";
			Object.defineProperty(t, "__esModule", {
				value: !0
			}), t.default = function(e) {
				return {
					id: "google",
					name: "Google",
					type: "oauth",
					wellKnown: "https://accounts.google.com/.well-known/openid-configuration",
					authorization: {
						params: {
							scope: "openid email profile"
						}
					},
					idToken: !0,
					checks: ["pkce", "state"],
					profile: e => ({
						id: e.sub,
						name: e.name,
						email: e.email,
						image: e.picture
					}),
					style: {
						logo: "/google.svg",
						bg: "#fff",
						text: "#000"
					},
					options: e
				}
			}
		},
		42706: (e, t, r) => {
			"use strict";
			e.exports = r(44870)
		}
	};
	var t = require("../../../../webpack-runtime.js");
	t.C(e);
	var r = e => t(t.s = e),
		o = t.X(0, [5994, 4512, 4767], () => r(6105));
	module.exports = o
})();

So we can see that c replaces FacebookProvider which is for some reason is lost during the build.

[AlexanderPolenov]

Alright, 8 hours in, and this is where I am now. First, I managed to build the project unminified, by adding the following to the next.config.mjs:

webpack(webpackConfig) {
    return {
        ...webpackConfig,
        optimization: {
            minimize: false
        }
    };
}

The error remains however, now it says TypeError: facebook is not a function.
I tried to run and debug the output route.js. So, the facebook is actually an object: {__esModule: true, default: ƒ}.
So, this is the root cause. Next.js bundler is misbehaving for some reason when I try to do npm run build.
But I still don't know how to fix. Please help.

[AlexanderPolenov]

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.