sub.domain.com/slug 500 error

[mworks-proj]

Getting this error for all posts (slug) in production env only. see log errors below

Error [ERR_REQUIRE_ESM]: require() of ES Module /var/task/node_modules/.pnpm/next-mdx-remote@4.4.1_react-dom@18.2.0_react@18.2.0/node_modules/next-mdx-remote/index.js from /var/task/.next/server/app/[domain]/[slug]/page.js not supported.
Instead change the require of index.js in /var/task/.next/server/app/[domain]/[slug]/page.js to a dynamic import() which is available in all CommonJS modules.
at /opt/rust/nodejs.js:1:11508
at Function.Qt (/opt/rust/nodejs.js:1:11878)
at Q.e.<computed>.K._load (/opt/rust/nodejs.js:1:11478)
at h.require (/var/task/node_modules/.pnpm/next@14.2.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:11:91121)
at 20349 (/var/task/.next/server/app/[domain]/[slug]/page.js:1:3413) {
code: 'ERR_REQUIRE_ESM',
digest: '2247482812'
}
⨯ Error [ERR_REQUIRE_ESM]: require() of ES Module /var/task/node_modules/.pnpm/next-mdx-remote@4.4.1_react-dom@18.2.0_react@18.2.0/node_modules/next-mdx-remote/index.js from /var/task/.next/server/app/[domain]/[slug]/page.js not supported.
Instead change the require of index.js in /var/task/.next/server/app/[domain]/[slug]/page.js to a dynamic import() which is available in all CommonJS modules.
at /opt/rust/nodejs.js:1:11508
at Function.Qt (/opt/rust/nodejs.js:1:11878)
at Q.e.<computed>.K._load (/opt/rust/nodejs.js:1:11478)
at h.require (/var/task/node_modules/.pnpm/next@14.2.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:11:91121)
at 20349 (/var/task/.next/server/app/[domain]/[slug]/page.js:1:3413) {
code: 'ERR_REQUIRE_ESM',
digest: '2247482812',
page: '/subdomain.domain.site/slug'
}
Error [ERR_REQUIRE_ESM]: require() of ES Module /var/task/node_modules/.pnpm/next-mdx-remote@4.4.1_react-dom@18.2.0_react@18.2.0/node_modules/next-mdx-remote/index.js from /var/task/.next/server/app/[domain]/[slug]/page.js not supported.
Instead change the require of index.js in /var/task/.next/server/app/[domain]/[slug]/page.js to a dynamic import() which is available in all CommonJS modules.
at /opt/rust/nodejs.js:1:11508
at Function.Qt (/opt/rust/nodejs.js:1:11878)
at Q.e.<computed>.K._load (/opt/rust/nodejs.js:1:11478)
at h.require (/var/task/node_modules/.pnpm/next@14.2.3_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:11:91121)
at 20349 (/var/task/.next/server/app/[domain]/[slug]/page.js:1:3413) {
code: 'ERR_REQUIRE_ESM',
digest: '2247482812',
page: '/subdomain.domain.site/slug'
}
Node.js process exited with exit status: 1. The logs above can help with debugging the issue.

[mworks-proj]

To resolve this issue in production env you should remove the [demo](subdomain: "demo",) logic in two places and minimize your redirects in middleware.ts. I will show you what I've done to resolve this slug 500 internal server error for your nextjs project.

1. middleware.ts logic

import { NextRequest, NextResponse } from "next/server";
import { getToken } from "next-auth/jwt";

export const config = {
  matcher: [
    /*
     * Match all paths except for:
     * 1. /api routes
     * 2. /_next (Next.js internals)
     * 3. /_static (inside /public)
     * 4. all root files inside /public (e.g. /favicon.ico)
     */
    "/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)",
  ],
};

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl;

  // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
  let hostname = req.headers
    .get("host")!
    .replace(".localhost:3000", `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

  // special case for Vercel preview deployment URLs
  if (
    hostname.includes("---") &&
    hostname.endsWith(`.${process.env.NEXT_PUBLIC_VERCEL_DEPLOYMENT_SUFFIX}`)
  ) {
    hostname = `${hostname.split("---")[0]}.${
      process.env.NEXT_PUBLIC_ROOT_DOMAIN
    }`;
  }

  const searchParams = req.nextUrl.searchParams.toString();
  // Get the pathname of the request (e.g. /, /about, /blog/first-post)
  const path = `${url.pathname}${
    searchParams.length > 0 ? `?${searchParams}` : ""
  }`;

  // rewrites for app pages
  if (hostname == `app.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`) {
    const session = await getToken({ req });
    if (!session && path !== "/login") {
      return NextResponse.redirect(new URL("/login", req.url));
    } else if (session && path == "/login") {
      return NextResponse.redirect(new URL("/", req.url));
    }
    return NextResponse.rewrite(
      new URL(`/app${path === "/" ? "" : path}`, req.url),
    );
  }

  // special case for `vercel.pub` domain
  if (hostname === "vercel.pub") {
    return NextResponse.redirect(
      "https://vercel.com/blog/platforms-starter-kit",
    );
  }

  // rewrite root application to `/home` folder
  if (
    hostname === "localhost:3000" ||
    hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN
  ) {
    return NextResponse.rewrite(
      new URL(`/home${path === "/" ? "" : path}`, req.url),
    );
  }

  // rewrite everything else to `/[domain]/[slug] dynamic route
  return NextResponse.rewrite(new URL(`/${hostname}${path}`, req.url));
}

2. Find file page.tsx on line 61 path=( app/domain/slug/page.tsx ) to modify the "demo" logic

Before

    where: {
      site: {
        subdomain: "demo",
      },
    },

After

    //where: {
      //site: {
        //subdomain: "demo",
      //},
    //},

3. Find pages.tsx on line 16 path=(app/domain/page.tsx) to remove "demo" logic

Before

    where: {
      subdomain: "demo",  
  },

After

    //where: {
      //subdomain: "demo",
  //},

4. My domain settings are:

• app.domain.tld
• domain.tld
• *.domain.tld