Build Error with experimental-edge runtime in Next.js 13.4 page router: TypeError: Cannot read properties of undefined (reading 'slice')

[Jainik-1743]

Summary

I'm using Next.js version 13.4 on Debian Linux with Node.js v21.5.0. I attempted to use the edge runtime for server-side rendering on a page (/about), and initially received an error recommending to switch to 'experimental-edge'. After switching to 'experimental-edge', a new error occurred during the build process:

TypeError: Cannot read properties of undefined (reading 'slice')
    at 1107 (/app/.next/server/pages/about.js:1:84283)
    at __webpack_require__ (/app/.next/server/edge-runtime-webpack.js:25:43)
    at 637 (/app/.next/server/pages/about.js:1:94091)
    at __webpack_require__ (/app/.next/server/edge-runtime-webpack.js:25:43)
    at 3205 (/app/.next/server/pages/about.js:1:67401)
    at __webpack_require__ (/app/.next/server/edge-runtime-webpack.js:25:43)
    at 7186 (/app/.next/server/pages/about.js:8:51351)
    at __webpack_require__ (/app/.next/server/edge-runtime-webpack.js:25:43)
    at 345 (/app/.next/server/pages/about.js:110:23513)
    at __webpack_require__ (/app/.next/server/edge-runtime-webpack.js:25:43)
This error occurs after I run yarn build.

I expect the page /about to be successfully compiled and built when using the 'experimental-edge' runtime, without encountering any runtime or build errors.

To Reproduce
Install Next.js version 13.4 on Debian Linux with Node.js v21.5.0.

Set the runtime to 'experimental-edge' for a page, e.g. /about.js:

export const runtime = 'experimental-edge';
Run yarn build.

Environment
Operating System: Debian Linux
Node.js Version: 21.5.0
Next.js Version: 13.4
React Version: 18.2.0
Additional Context
The warning DeprecationWarning: The 'punycode' module is deprecated appears multiple times during the build process.
The error seems to occur after collecting page data, specifically when processing /about.js.
I'm using the following Next.js configuration in next.config.mjs:

import nextTranslate from "next-translate-plugin";
import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
import withBundleAnalyzer from "@next/bundle-analyzer";
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const withBundleAnalyzerConfig = withBundleAnalyzer({
  enabled: process.env.ANALYZE === "true",
  openAnalyzer: true,
});

if (process.env.NODE_ENV === "development") {
  ;(async () => {
    await setupDevPlatform();
  })();
}

const nextConfig = {
  experimental: {
    externalDir: true,
    outputFileTracingRoot: path.resolve(__dirname, "./"),
  },
  images: {
    loader: "custom",
    domains: [process.env.NEXT_PUBLIC_ARTIFACT_URL],
    path: process.env.NEXT_PUBLIC_ARTIFACT_URL,
  },
  webpack: (config, { isServer }) => {
    config.module.rules.push({
      test: /\.js$/,
      include: /node_modules\/undici/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    });

    return config;
  },
};

export default withBundleAnalyzerConfig(nextTranslate(nextConfig));

Any guidance or workarounds for resolving this error would be appreciated.

Additional information

No response

Example

No response

[xambassador]

Faced similar issue when rendering on edge. Just removed edge and stick with NodeJS for renderer and hosted on vps