feat: build edge functions with node.js modules and fail at runtime (#38234)

## What's in there?

The Edge runtime [does not support Node.js modules](https://edge-runtime.vercel.app/features/available-apis#unsupported-apis).
When building Next.js application, we currently fail the build when detecting node.js module imported from middleware.

This is an blocker for using code that is conditionally loading node.js modules (based on platform/env detection), as @cramforce reported.

This PR implements a new strategy where:
- we can build such middleware/Edge API route code **with a warning**
- we fail at run time, with graceful errors in dev (console & react-dev-overlay error)
- we fail at run time, with console errors in production

## How to test?

All cases are covered with integration tests.
To try them live, create a simple app with a page, a `middleware.js` file and a `pages/api/route.js`file.
Here are iconic examples:

### node.js modules
```js
// middleware.js
import { NextResponse } from 'next/server'
// static
import { basename } from 'path'

export default async function middleware() {
  // dynamic
  const { basename } = await import('path')
  basename()
  return NextResponse.next()
}

export const config = { matcher: '/' }
```
```js
// pags/api/route.js
// static
import { isAbsolute } from 'path'

export default async function handle() {
  // dynamic
  const { isAbsolute } = await import('path')
  return Response.json({ useNodeModule: isAbsolute('/test') })
}

export const config = { runtime: 'experimental-edge' }
```

Desired error (+ source code highlight in dev):

> The edge runtime does not support Node.js 'path' module
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

Desired warning at build time:

> A Node.js module is loaded ('path' at line 2) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

- [x]  in dev middleware, static, shows desired error on stderr
- [x]  in dev route, static, shows desired error on stderr
- [x]  in dev middleware, dynamic, shows desired error on stderr
- [x]  in dev route, dynamic, shows desired error on stderr
- [x]  in dev middleware, static, shows desired error on react error overlay
- [x]  in dev route, static, shows desired error on react error overlay
- [x]  in dev middleware, dynamic, shows desired error on react error overlay
- [x]  in dev route, dynamic, shows desired error on react error overlay
- [x]  builds middleware successfully, shows build warning, shows desired error on stderr on call
- [x]  builds route successfully, shows build warning, shows desired error on stderr on call

### 3rd party modules not found

```js
// middleware.js
import { NextResponse } from 'next/server'
// static
import Unknown from 'unknown'

export default async function middleware() {
  // dynamic
  const Unknown = await import('unknown')
  new Unknown()
  return NextResponse.next()
}
```
export const config = { matcher: '/' }
```
```js
// pags/api/route.js
// static
import Unknown from 'unknown'

export default async function handle() {
  // dynamic
  const Unknown = await import('unknown')
  return Response.json({ use3rdPartyModule: Unknown() })
}

export const config = { runtime: 'experimental-edge' }
```

Desired error (+ source code highlight in dev):

> Module not found: Can't resolve 'does-not-exist'
Learn More: https://nextjs.org/docs/messages/module-not-found

- [x]  in dev middleware, static, shows desired error on stderr
- [x]  in dev route, static, shows desired error on stderr
- [x]  in dev middleware, dynamic, shows desired error on stderr
- [x]  in dev route, dynamic, shows desired error on stderr
- [x]  in dev middleware, static, shows desired error on react error overlay
- [x]  in dev route, static, shows desired error on react error overlay
- [x]  in dev middleware, dynamic, shows desired error on react error overlay
- [x]  in dev route, dynamic, shows desired error on react error overlay
- [x]  fails to build middleware, with desired error on stderr
- [x]  fails to build route, with desired error on stderr

### unused node.js modules
```js
// middleware.js
import { NextResponse } from 'next/server'

export default async function middleware() {
  if (process.exit) {
    const { basename } = await import('path')
    basename()
  }
  return NextResponse.next()
}
```
```js
// pags/api/route.js
export default async function handle() {
  if (process.exit) {
    const { basename } = await import('path')
    basename()
  }
  return Response.json({ useNodeModule: false })
}

export const config = { runtime: 'experimental-edge' }
```

Desired warning at build time:

> A Node.js module is loaded ('path' at line 2) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

- [x]  invoke middleware in dev with no error
- [x]  invoke route in dev with no error
- [x]  builds successfully, shows build warning, invoke middleware with no error
- [x]  builds successfully, shows build warning, invoke api-route with no error

## Notes to reviewers

The strategy to implement this feature is to leverages webpack [externals](https://webpack.js.org/configuration/externals/#externals) and run a global `__unsupported_module()` function when using a node.js module from edge function's code.
For the record, I tried using [webpack resolve.fallback](https://webpack.js.org/configuration/resolve/#resolvefallback) and [Webpack.IgnorePlugin](https://webpack.js.org/plugins/ignore-plugin/) but they do not allow throwing proper errors at runtime that would contain the loaded module name for reporting.

`__unsupported_module()` is defined in `EdgeRuntime`, and returns a proxy that's throw on use (whether it's property access, function call, new operator... synchronous & promise-based styles).

However there's an issue with error reporting: webpack does not includes the import lines in the generated sourcemaps, preventing from displaying useful errors.
I extended our middleware-plugin to supplement the sourcemaps (when analyzing edge function code, it saves which module is imported from which file, together with line/column/source)

The react-dev-overlay was adapted to look for this additional information when the caught error relates to modules, instead of looking at sourcemaps.

I removed the previous mechanism (built by @nkzawa ) which caught webpack errors at built time to change the displayed error message (files `next/build/index.js`, `next/build/utils.ts` and `wellknown-errors-plugin`)

Author: feugy

errors/manifest.json

@@ -707,6 +707,10 @@
         {
           "title": "middleware-dynamic-wasm-compilation",
           "path": "/errors/middleware-dynamic-wasm-compilation.md"
+        },
+        {
+          "title": "node-module-in-edge-runtime",
+          "path": "/errors/node-module-in-edge-runtime.md"
         }
       ]
     }

errors/node-module-in-edge-runtime.md

@@ -0,0 +1,39 @@
+# Using Node.js module in Edge runtime
+
+#### Why This Error Occurred
+
+The code in your [Middleware][middleware] or your [Edge API routes][routes] is using a feature from Node.js runtime.
+
+However, the Edge Runtime does not support [Node.js APIs and globals][node-primitives].
+
+#### Possible Ways to Fix It
+
+When it runs in dev mode, your application will show in the console, and in your browser, which file is importing and using an unsupported module.
+This module must be avoided: either by not importing it, or by replacing it with a polyfill.
+
+Please note your code can import Node.js modules **as long as they are not used**.
+The following example builds and works at runtime:
+
+```ts
+import { NextResponse } from 'next/server'
+import { spawn } from 'child_process'
+
+export default async function middleware() {
+  if (process.version) {
+    spawn('ls', ['-lh'])
+  }
+  return NextResponse.next()
+}
+```
+
+Dynamic imports in unreachable code path is also supported.
+
+### Useful Links
+
+- [Edge runtime supported APIs and primitives][edge-primitives]
+- [Next.js Middleware][middleware]
+
+[middleware]: https://nextjs.org/docs/advanced-features/middleware
+[routes]: https://nextjs.org/docs/api-routes/edge-api-routes
+[node-primitives]: https://nodejs.org/api/index.html
+[edge-primitives]: https://edge-runtime.vercel.app/features/available-apis

packages/next/build/entries.ts

@@ -482,8 +482,8 @@ export function finalizeEntrypoint({
       ? { import: value }
       : value
 
+  const isApi = name.startsWith('pages/api/')
   if (compilerType === 'server') {
-    const isApi = name.startsWith('pages/api/')
     return {
       publicPath: isApi ? '' : undefined,
       runtime: isApi ? 'webpack-api-runtime' : 'webpack-runtime',
@@ -494,7 +494,7 @@ export function finalizeEntrypoint({
 
   if (compilerType === 'edge-server') {
     return {
-      layer: isMiddlewareFilename(name) ? 'middleware' : undefined,
+      layer: isMiddlewareFilename(name) || isApi ? 'middleware' : undefined,
       library: { name: ['_ENTRIES', `middleware_[name]`], type: 'assign' },
       runtime: EDGE_RUNTIME_WEBPACK,
       asyncChunks: false,

packages/next/build/index.ts

@@ -90,8 +90,6 @@ import {
   PageInfo,
   printCustomRoutes,
   printTreeView,
-  getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage,
-  getUnresolvedModuleFromError,
   copyTracedFiles,
   isReservedPage,
   isServerComponentPage,
@@ -874,20 +872,6 @@ export default async function build(
         console.error(error)
         console.error()
 
-        const edgeRuntimeErrors = result.stats[2]?.compilation.errors ?? []
-
-        for (const err of edgeRuntimeErrors) {
-          // When using the web runtime, common Node.js native APIs are not available.
-          const moduleName = getUnresolvedModuleFromError(err.message)
-          if (!moduleName) continue
-
-          const e = new Error(
-            getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage(moduleName)
-          ) as NextError
-          e.code = 'EDGE_RUNTIME_UNSUPPORTED_API'
-          throw e
-        }
-
         if (
           error.indexOf('private-next-pages') > -1 ||
           error.indexOf('__next_polyfill__') > -1

packages/next/build/utils.ts

@@ -1,9 +1,4 @@
-import type {
-  NextConfig,
-  NextConfigComplete,
-  ServerRuntime,
-} from '../server/config-shared'
-import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
+import type { NextConfigComplete, ServerRuntime } from '../server/config-shared'
 
 import '../server/node-polyfill-fetch'
 import chalk from 'next/dist/compiled/chalk'
@@ -26,7 +21,6 @@ import {
   MIDDLEWARE_FILENAME,
   SERVER_RUNTIME,
 } from '../lib/constants'
-import { EDGE_RUNTIME_WEBPACK } from '../shared/lib/constants'
 import prettyBytes from '../lib/pretty-bytes'
 import { getRouteRegex } from '../shared/lib/router/utils/route-regex'
 import { getRouteMatcher } from '../shared/lib/router/utils/route-matcher'
@@ -47,9 +41,7 @@ import { Sema } from 'next/dist/compiled/async-sema'
 import { MiddlewareManifest } from './webpack/plugins/middleware-plugin'
 import { denormalizePagePath } from '../shared/lib/page-path/denormalize-page-path'
 import { normalizePagePath } from '../shared/lib/page-path/normalize-page-path'
-import { getPageStaticInfo } from './analysis/get-page-static-info'
 
-const { builtinModules } = require('module')
 const RESERVED_PAGE = /^\/(_app|_error|_document|api(\/|$))/
 const fileGzipStats: { [k: string]: Promise<number> | undefined } = {}
 const fsStatGzip = (file: string) => {
@@ -1120,16 +1112,6 @@ export function isServerComponentPage(
   })
 }
 
-export function getUnresolvedModuleFromError(
-  error: string
-): string | undefined {
-  const moduleErrorRegex = new RegExp(
-    `Module not found: Error: Can't resolve '(\\w+)'`
-  )
-  const [, moduleName] = error.match(moduleErrorRegex) || []
-  return builtinModules.find((item: string) => item === moduleName)
-}
-
 export async function copyTracedFiles(
   dir: string,
   distDir: string,
@@ -1268,49 +1250,6 @@ export function isCustomErrorPage(page: string) {
   return page === '/404' || page === '/500'
 }
 
-// FIX ME: it does not work for non-middleware edge functions
-//  since chunks don't contain runtime specified somehow
-export async function isEdgeRuntimeCompiled(
-  compilation: webpack5.Compilation,
-  module: any,
-  config: NextConfig
-) {
-  if (!module) return false
-
-  for (const chunk of compilation.chunkGraph.getModuleChunksIterable(module)) {
-    let runtimes: string[]
-    if (typeof chunk.runtime === 'string') {
-      runtimes = [chunk.runtime]
-    } else if (chunk.runtime) {
-      runtimes = [...chunk.runtime]
-    } else {
-      runtimes = []
-    }
-
-    if (runtimes.some((r) => r === EDGE_RUNTIME_WEBPACK)) {
-      return true
-    }
-  }
-
-  const staticInfo = await getPageStaticInfo({
-    pageFilePath: module.resource,
-    nextConfig: config,
-  })
-
-  // Check the page runtime as well since we cannot detect the runtime from
-  // compilation when it's for the client part of edge function
-  return staticInfo.runtime === SERVER_RUNTIME.edge
-}
-
-export function getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage(
-  name: string
-) {
-  return (
-    `You're using a Node.js module (${name}) which is not supported in the Edge Runtime.\n` +
-    'Learn more: https://nextjs.org/docs/api-reference/edge-runtime'
-  )
-}
-
 export function isMiddlewareFile(file: string) {
   return (
     file === `/${MIDDLEWARE_FILENAME}` || file === `/src/${MIDDLEWARE_FILENAME}`

packages/next/build/webpack-config.ts

@@ -34,7 +34,9 @@ import { NextConfigComplete } from '../server/config-shared'
 import { finalizeEntrypoint } from './entries'
 import * as Log from './output/log'
 import { build as buildConfiguration } from './webpack/config'
-import MiddlewarePlugin from './webpack/plugins/middleware-plugin'
+import MiddlewarePlugin, {
+  handleWebpackExtenalForEdgeRuntime,
+} from './webpack/plugins/middleware-plugin'
 import BuildManifestPlugin from './webpack/plugins/build-manifest-plugin'
 import { JsConfigPathsPlugin } from './webpack/plugins/jsconfig-paths-plugin'
 import { DropClientPage } from './webpack/plugins/next-drop-client-page-plugin'
@@ -976,6 +978,7 @@ export default async function getBaseWebpackConfig(
                     'next/dist/compiled/chalk': '{}',
                     'react-dom': '{}',
                   },
+                  handleWebpackExtenalForEdgeRuntime,
                 ]
               : []),
           ]
@@ -1672,7 +1675,7 @@ export default async function getBaseWebpackConfig(
             isLikeServerless,
           })
         })(),
-      new WellKnownErrorsPlugin({ config }),
+      new WellKnownErrorsPlugin(),
       isClient &&
         new CopyFilePlugin({
           filePath: require.resolve('./polyfills/polyfill-nomodule'),

packages/next/build/webpack/loaders/get-module-build-info.ts

@@ -13,6 +13,7 @@ export function getModuleBuildInfo(webpackModule: webpack5.Module) {
     nextWasmMiddlewareBinding?: WasmBinding
     usingIndirectEval?: boolean | Set<string>
     route?: RouteMeta
+    importLocByPath?: Map<string, any>
   }
 }
 

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -96,6 +96,18 @@ export default class MiddlewarePlugin {
   }
 }
 
+export async function handleWebpackExtenalForEdgeRuntime({
+  request,
+  contextInfo,
+}: {
+  request: string
+  contextInfo: any
+}) {
+  if (contextInfo.issuerLayer === 'middleware' && isNodeJsModule(request)) {
+    return `root  __import_unsupported('${request}')`
+  }
+}
+
 function getCodeAnalizer(params: {
   dev: boolean
   compiler: webpack5.Compiler
@@ -256,12 +268,13 @@ function getCodeAnalizer(params: {
         !isNullLiteral(firstParameter) &&
         !isUndefinedIdentifier(firstParameter)
       ) {
-        const error = new wp.WebpackError(
-          `Your middleware is returning a response body (line: ${node.loc.start.line}), which is not supported. Learn more: https://nextjs.org/docs/messages/returning-response-body-in-middleware`
-        )
-        error.name = NAME
-        error.module = parser.state.current
-        error.loc = node.loc
+        const error = buildWebpackError({
+          message: `Middleware is returning a response body (line: ${node.loc.start.line}), which is not supported.
+Learn more: https://nextjs.org/docs/messages/returning-response-body-in-middleware`,
+          compilation,
+          parser,
+          ...node,
+        })
         if (dev) {
           compilation.warnings.push(error)
         } else {
@@ -270,6 +283,40 @@ function getCodeAnalizer(params: {
       }
     }
 
+    /**
+     * Handler to store original source location of static and dynamic imports into module's buildInfo.
+     */
+    const handleImport = (node: any) => {
+      if (isInMiddlewareLayer(parser) && node.source?.value && node?.loc) {
+        const { module, source } = parser.state
+        const buildInfo = getModuleBuildInfo(module)
+        if (!buildInfo.importLocByPath) {
+          buildInfo.importLocByPath = new Map()
+        }
+
+        const importedModule = node.source.value?.toString()!
+        buildInfo.importLocByPath.set(importedModule, {
+          sourcePosition: {
+            ...node.loc.start,
+            source: module.identifier(),
+          },
+          sourceContent: source.toString(),
+        })
+
+        if (!dev && isNodeJsModule(importedModule)) {
+          compilation.warnings.push(
+            buildWebpackError({
+              message: `A Node.js module is loaded ('${importedModule}' at line ${node.loc.start.line}) which is not supported in the Edge Runtime.
+Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`,
+              compilation,
+              parser,
+              ...node,
+            })
+          )
+        }
+      }
+    }
+
     /**
      * A noop handler to skip analyzing some cases.
      * Order matters: for it to work, it must be registered first
@@ -295,6 +342,8 @@ function getCodeAnalizer(params: {
     hooks.new.for('NextResponse').tap(NAME, handleNewResponseExpression)
     hooks.callMemberChain.for('process').tap(NAME, handleCallMemberChain)
     hooks.expressionMemberChain.for('process').tap(NAME, handleCallMemberChain)
+    hooks.importCall.tap(NAME, handleImport)
+    hooks.import.tap(NAME, handleImport)
 
     /**
      * Support static analyzing environment variables through
@@ -388,18 +437,19 @@ function getExtractMetadata(params: {
             continue
           }
 
-          const error = new wp.WebpackError(
-            `Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Middleware ${entryName}${
-              typeof buildInfo.usingIndirectEval !== 'boolean'
-                ? `\nUsed by ${Array.from(buildInfo.usingIndirectEval).join(
-                    ', '
-                  )}`
-                : ''
-            }`
+          compilation.errors.push(
+            buildWebpackError({
+              message: `Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Middleware ${entryName}${
+                typeof buildInfo.usingIndirectEval !== 'boolean'
+                  ? `\nUsed by ${Array.from(buildInfo.usingIndirectEval).join(
+                      ', '
+                    )}`
+                  : ''
+              }`,
+              entryModule,
+              compilation,
+            })
           )
-
-          error.module = entryModule
-          compilation.errors.push(error)
         }
 
         /**
@@ -564,14 +614,18 @@ function registerUnsupportedApiHooks(
   parser: webpack5.javascript.JavascriptParser,
   compilation: webpack5.Compilation
 ) {
-  const { WebpackError } = compilation.compiler.webpack
   for (const expression of EDGE_UNSUPPORTED_NODE_APIS) {
     const warnForUnsupportedApi = (node: any) => {
       if (!isInMiddlewareLayer(parser)) {
         return
       }
       compilation.warnings.push(
-        makeUnsupportedApiError(WebpackError, parser, expression, node.loc)
+        buildUnsupportedApiError({
+          compilation,
+          parser,
+          apiName: expression,
+          ...node,
+        })
       )
       return true
     }
@@ -590,12 +644,12 @@ function registerUnsupportedApiHooks(
       return
     }
     compilation.warnings.push(
-      makeUnsupportedApiError(
-        WebpackError,
+      buildUnsupportedApiError({
+        compilation,
         parser,
-        `process.${callee}`,
-        node.loc
-      )
+        apiName: `process.${callee}`,
+        ...node,
+      })
     )
     return true
   }
@@ -608,18 +662,43 @@ function registerUnsupportedApiHooks(
     .tap(NAME, warnForUnsupportedProcessApi)
 }
 
-function makeUnsupportedApiError(
-  WebpackError: typeof webpack5.WebpackError,
-  parser: webpack5.javascript.JavascriptParser,
-  name: string,
+function buildUnsupportedApiError({
+  apiName,
+  loc,
+  ...rest
+}: {
+  apiName: string
   loc: any
-) {
-  const error = new WebpackError(
-    `You're using a Node.js API (${name} at line: ${loc.start.line}) which is not supported in the Edge Runtime that Middleware uses.
-Learn more: https://nextjs.org/docs/api-reference/edge-runtime`
-  )
+  compilation: webpack5.Compilation
+  parser: webpack5.javascript.JavascriptParser
+}) {
+  return buildWebpackError({
+    message: `A Node.js API is used (${apiName} at line: ${loc.start.line}) which is not supported in the Edge Runtime.
+Learn more: https://nextjs.org/docs/api-reference/edge-runtime`,
+    loc,
+    ...rest,
+  })
+}
+
+function buildWebpackError({
+  message,
+  loc,
+  compilation,
+  entryModule,
+  parser,
+}: {
+  message: string
+  loc?: any
+  compilation: webpack5.Compilation
+  entryModule?: webpack5.Module
+  parser?: webpack5.javascript.JavascriptParser
+}) {
+  const error = new compilation.compiler.webpack.WebpackError(message)
   error.name = NAME
-  error.module = parser.state.current
+  const module = entryModule ?? parser?.state.current
+  if (module) {
+    error.module = module
+  }
   error.loc = loc
   return error
 }
@@ -653,3 +732,7 @@ function isProcessEnvMemberExpression(memberExpression: any): boolean {
         memberExpression.property.name === 'env'))
   )
 }
+
+function isNodeJsModule(moduleName: string) {
+  return require('module').builtinModules.includes(moduleName)
+}

packages/next/build/webpack/plugins/wellknown-errors-plugin/index.ts

@@ -1,40 +1,27 @@
 import type { webpack5 as webpack } from 'next/dist/compiled/webpack/webpack'
-import type { NextConfig } from '../../../../server/config-shared'
 
 import { getModuleBuildError } from './webpackModuleError'
 
+const NAME = 'WellKnownErrorsPlugin'
 export class WellKnownErrorsPlugin {
-  config: NextConfig
-
-  constructor({ config }: { config: NextConfig }) {
-    this.config = config
-  }
-
   apply(compiler: webpack.Compiler) {
-    compiler.hooks.compilation.tap('WellKnownErrorsPlugin', (compilation) => {
-      compilation.hooks.afterSeal.tapPromise(
-        'WellKnownErrorsPlugin',
-        async () => {
-          if (compilation.errors?.length) {
-            await Promise.all(
-              compilation.errors.map(async (err, i) => {
-                try {
-                  const moduleError = await getModuleBuildError(
-                    compilation,
-                    err,
-                    this.config
-                  )
-                  if (moduleError !== false) {
-                    compilation.errors[i] = moduleError
-                  }
-                } catch (e) {
-                  console.log(e)
+    compiler.hooks.compilation.tap(NAME, (compilation) => {
+      compilation.hooks.afterSeal.tapPromise(NAME, async () => {
+        if (compilation.errors?.length) {
+          await Promise.all(
+            compilation.errors.map(async (err, i) => {
+              try {
+                const moduleError = await getModuleBuildError(compilation, err)
+                if (moduleError !== false) {
+                  compilation.errors[i] = moduleError
                 }
-              })
-            )
-          }
+              } catch (e) {
+                console.log(e)
+              }
+            })
+          )
         }
-      )
+      })
     })
   }
 }

packages/next/build/webpack/plugins/wellknown-errors-plugin/parseNotFoundError.ts

@@ -2,12 +2,6 @@ import Chalk from 'next/dist/compiled/chalk'
 import { SimpleWebpackError } from './simpleWebpackError'
 import { createOriginalStackFrame } from 'next/dist/compiled/@next/react-dev-overlay/dist/middleware'
 import type { webpack5 } from 'next/dist/compiled/webpack/webpack'
-import {
-  getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage,
-  getUnresolvedModuleFromError,
-  isEdgeRuntimeCompiled,
-} from '../../../utils'
-import { NextConfig } from '../../../../server/config-shared'
 
 const chalk = new Chalk.constructor({ enabled: true })
 
@@ -54,8 +48,7 @@ function getModuleTrace(input: any, compilation: any) {
 export async function getNotFoundError(
   compilation: webpack5.Compilation,
   input: any,
-  fileName: string,
-  config: NextConfig
+  fileName: string
 ) {
   if (input.name !== 'ModuleNotFoundError') {
     return false
@@ -114,15 +107,6 @@ export async function getNotFoundError(
       importTrace() +
       '\nhttps://nextjs.org/docs/messages/module-not-found'
 
-    const moduleName = getUnresolvedModuleFromError(input.message)
-    if (moduleName) {
-      if (await isEdgeRuntimeCompiled(compilation, input.module, config)) {
-        message +=
-          '\n\n' +
-          getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage(moduleName)
-      }
-    }
-
     return new SimpleWebpackError(
       `${chalk.cyan(fileName)}:${chalk.yellow(
         result.originalStackFrame.lineNumber?.toString() ?? ''

packages/next/build/webpack/plugins/wellknown-errors-plugin/webpackModuleError.ts

@@ -1,7 +1,6 @@
 import { readFileSync } from 'fs'
 import * as path from 'path'
 import type { webpack5 as webpack } from 'next/dist/compiled/webpack/webpack'
-import type { NextConfig } from '../../../../server/config-shared'
 
 import { getBabelError } from './parseBabel'
 import { getCssError } from './parseCss'
@@ -44,8 +43,7 @@ function getFileData(
 
 export async function getModuleBuildError(
   compilation: webpack.Compilation,
-  input: any,
-  config: NextConfig
+  input: any
 ): Promise<SimpleWebpackError | false> {
   if (
     !(
@@ -65,8 +63,7 @@ export async function getModuleBuildError(
   const notFoundError = await getNotFoundError(
     compilation,
     input,
-    sourceFilename,
-    config
+    sourceFilename
   )
   if (notFoundError !== false) {
     return notFoundError

packages/next/server/dev/next-dev-server.ts

@@ -795,22 +795,23 @@ export default class DevServer extends Server {
     if (isError(err) && err.stack) {
       try {
         const frames = parseStack(err.stack!)
-        const frame = frames.find(({ file }) => !file?.startsWith('eval'))!
+        const frame = frames.find(
+          ({ file }) =>
+            !file?.startsWith('eval') && !file?.includes('sandbox/context')
+        )!
 
         if (frame.lineNumber && frame?.file) {
           const moduleId = frame.file!.replace(
             /^(webpack-internal:\/\/\/|file:\/\/)/,
             ''
           )
 
-          let compilation: any
-
-          const src = getErrorSource(err)
-          if (src === 'edge-server') {
-            compilation = this.hotReloader?.edgeServerStats?.compilation
-          } else {
-            compilation = this.hotReloader?.serverStats?.compilation
-          }
+          const src = getErrorSource(err as Error)
+          const compilation = (
+            src === 'edge-server'
+              ? this.hotReloader?.edgeServerStats?.compilation
+              : this.hotReloader?.serverStats?.compilation
+          )!
 
           const source = await getSourceById(
             !!frame.file?.startsWith(sep) || !!frame.file?.startsWith('file:'),
@@ -825,6 +826,8 @@ export default class DevServer extends Server {
             frame,
             modulePath: moduleId,
             rootDirectory: this.dir,
+            errorMessage: err.message,
+            compilation,
           })
 
           if (originalFrame) {

packages/next/server/web/sandbox/context.ts

@@ -129,15 +129,36 @@ async function createModuleContext(options: ModuleContextOptions) {
         return fn()
       }
 
+      context.__import_unsupported = function __import_unsupported(
+        moduleName: string
+      ) {
+        const proxy: any = new Proxy(function () {}, {
+          get(_obj, prop) {
+            if (prop === 'then') {
+              return {}
+            }
+            throw new Error(getUnsupportedModuleErrorMessage(moduleName))
+          },
+          construct() {
+            throw new Error(getUnsupportedModuleErrorMessage(moduleName))
+          },
+          apply(_target, _this, args) {
+            if (args[0] instanceof Function) {
+              return args[0](proxy)
+            }
+            throw new Error(getUnsupportedModuleErrorMessage(moduleName))
+          },
+        })
+        return new Proxy({}, { get: () => proxy })
+      }
+
       context.__next_webassembly_compile__ =
         function __next_webassembly_compile__(fn: Function) {
           const key = fn.toString()
           if (!warnedWasmCodegens.has(key)) {
             const warning = getServerError(
-              new Error(
-                "Dynamic WASM code generation (e. g. 'WebAssembly.compile') not allowed in Middleware.\n" +
-                  'Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation'
-              ),
+              new Error(`Dynamic WASM code generation (e. g. 'WebAssembly.compile') not allowed in Middleware.
+Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation`),
               'edge-server'
             )
             warning.name = 'DynamicWasmCodeGenerationWarning'
@@ -163,10 +184,8 @@ async function createModuleContext(options: ModuleContextOptions) {
           const key = fn.toString()
           if (instantiatedFromBuffer && !warnedWasmCodegens.has(key)) {
             const warning = getServerError(
-              new Error(
-                "Dynamic WASM code generation ('WebAssembly.instantiate' with a buffer parameter) not allowed in Middleware.\n" +
-                  'Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation'
-              ),
+              new Error(`Dynamic WASM code generation ('WebAssembly.instantiate' with a buffer parameter) not allowed in Middleware.
+Learn More: https://nextjs.org/docs/messages/middleware-dynamic-wasm-compilation`),
               'edge-server'
             )
             warning.name = 'DynamicWasmCodeGenerationWarning'
@@ -321,7 +340,7 @@ function emitWarning(
 ) {
   if (!warnedAlready.has(name)) {
     const warning =
-      new Error(`You're using a Node.js API (${name}) which is not supported in the Edge Runtime that Middleware uses.
+      new Error(`A Node.js API is used (${name}) which is not supported in the Edge Runtime.
 Learn more: https://nextjs.org/docs/api-reference/edge-runtime`)
     warning.name = 'NodejsRuntimeApiInMiddlewareWarning'
     contextOptions.onWarning(warning)
@@ -335,3 +354,9 @@ function decorateUnhandledError(error: any) {
     decorateServerError(error, 'edge-server')
   }
 }
+
+function getUnsupportedModuleErrorMessage(module: string) {
+  // warning: if you change these messages, you must adjust how react-dev-overlay's middleware detects modules not found
+  return `The edge runtime does not support Node.js '${module}' module.
+Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime`
+}

packages/react-dev-overlay/src/internal/helpers/getErrorByType.ts

@@ -23,7 +23,8 @@ export async function getErrorByType(
         error: event.reason,
         frames: await getOriginalStackFrames(
           event.frames,
-          getErrorSource(event.reason)
+          getErrorSource(event.reason),
+          event.reason.toString()
         ),
       }
     }

packages/react-dev-overlay/src/internal/helpers/nodeStackFrames.ts

@@ -37,7 +37,7 @@ export function getServerError(error: Error, type: ErrorType): Error {
 
   n.name = error.name
   try {
-    n.stack = parse(error.stack!)
+    n.stack = `${n.toString()}\n${parse(error.stack!)
       .map(getFilesystemFrame)
       .map((f) => {
         let str = `    at ${f.methodName}`
@@ -53,7 +53,7 @@ export function getServerError(error: Error, type: ErrorType): Error {
         }
         return str
       })
-      .join('\n')
+      .join('\n')}`
   } catch {
     n.stack = error.stack
   }

packages/react-dev-overlay/src/internal/helpers/stack-frame.ts

@@ -32,19 +32,24 @@ export type OriginalStackFrame =
 
 export function getOriginalStackFrames(
   frames: StackFrame[],
-  type: 'server' | 'edge-server' | null
+  type: 'server' | 'edge-server' | null,
+  errorMessage: string
 ) {
-  return Promise.all(frames.map((frame) => getOriginalStackFrame(frame, type)))
+  return Promise.all(
+    frames.map((frame) => getOriginalStackFrame(frame, type, errorMessage))
+  )
 }
 
 export function getOriginalStackFrame(
   source: StackFrame,
-  type: 'server' | 'edge-server' | null
+  type: 'server' | 'edge-server' | null,
+  errorMessage: string
 ): Promise<OriginalStackFrame> {
   async function _getOriginalStackFrame(): Promise<OriginalStackFrame> {
     const params = new URLSearchParams()
     params.append('isServer', String(type === 'server'))
     params.append('isEdgeServer', String(type === 'edge-server'))
+    params.append('errorMessage', errorMessage)
     for (const key in source) {
       params.append(key, ((source as any)[key] ?? '').toString())
     }

packages/react-dev-overlay/src/middleware.ts

@@ -40,6 +40,20 @@ function getModuleId(compilation: any, module: any) {
   return compilation.chunkGraph.getModuleId(module)
 }
 
+function getModuleById(
+  id: string | undefined,
+  compilation: webpack.Compilation
+) {
+  return [...compilation.modules].find(
+    (searchModule) => getModuleId(compilation, searchModule) === id
+  )
+}
+
+function findModuleNotFoundFromError(errorMessage: string | undefined) {
+  const match = errorMessage?.match(/'([^']+)' module/)
+  return match && match[1]
+}
+
 function getModuleSource(compilation: any, module: any): any {
   return (
     (module &&
@@ -100,25 +114,45 @@ async function findOriginalSourcePositionAndContent(
   }
 }
 
+function findOriginalSourcePositionAndContentFromCompilation(
+  modulePath: string | undefined,
+  importedModule: string,
+  compilation: webpack.Compilation
+) {
+  const module = getModuleById(modulePath, compilation)
+  return module?.buildInfo?.importLocByPath?.get(importedModule) ?? null
+}
+
 export async function createOriginalStackFrame({
   line,
   column,
   source,
   modulePath,
   rootDirectory,
   frame,
+  errorMessage,
+  compilation,
 }: {
   line: number
   column: number | null
   source: any
   modulePath?: string
   rootDirectory: string
   frame: any
+  errorMessage?: string
+  compilation?: webpack.Compilation
 }): Promise<OriginalStackFrameResponse | null> {
-  const result = await findOriginalSourcePositionAndContent(source, {
-    line,
-    column,
-  })
+  const moduleNotFound = findModuleNotFoundFromError(errorMessage)
+  const result = moduleNotFound
+    ? findOriginalSourcePositionAndContentFromCompilation(
+        modulePath,
+        moduleNotFound,
+        compilation
+      )
+    : await findOriginalSourcePositionAndContent(source, {
+        line,
+        column,
+      })
 
   if (result === null) {
     return null
@@ -170,7 +204,7 @@ export async function createOriginalStackFrame({
 export async function getSourceById(
   isFile: boolean,
   id: string,
-  compilation: any
+  compilation: webpack.Compilation
 ): Promise<Source> {
   if (isFile) {
     const fileContent: string | null = await fs
@@ -198,9 +232,7 @@ export async function getSourceById(
       return null
     }
 
-    const module = [...compilation.modules].find(
-      (searchModule) => getModuleId(compilation, searchModule) === id
-    )
+    const module = getModuleById(id, compilation)
     return getModuleSource(compilation, module)
   } catch (err) {
     console.error(`Failed to lookup module by ID ("${id}"):`, err)
@@ -220,6 +252,7 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) {
       const frame = query as unknown as StackFrame & {
         isEdgeServer: 'true' | 'false'
         isServer: 'true' | 'false'
+        errorMessage: string | undefined
       }
       if (
         !(
@@ -239,14 +272,13 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) {
       )
 
       let source: Source
+      const compilation =
+        frame.isEdgeServer === 'true'
+          ? options.edgeServerStats()?.compilation
+          : frame.isServer === 'true'
+          ? options.serverStats()?.compilation
+          : options.stats()?.compilation
       try {
-        const compilation =
-          frame.isEdgeServer === 'true'
-            ? options.edgeServerStats()?.compilation
-            : frame.isServer === 'true'
-            ? options.serverStats()?.compilation
-            : options.stats()?.compilation
-
         source = await getSourceById(
           frame.file.startsWith('file:'),
           moduleId,
@@ -282,6 +314,8 @@ function getOverlayMiddleware(options: OverlayMiddlewareOptions) {
           frame,
           modulePath: moduleId,
           rootDirectory: options.rootDirectory,
+          errorMessage: frame.errorMessage,
+          compilation,
         })
 
         if (originalStackFrameResponse === null) {

test/integration/edge-runtime-module-errors/lib.js

@@ -0,0 +1 @@
+// populated with tests

test/integration/edge-runtime-module-errors/middleware.js

@@ -0,0 +1,4 @@
+// populated with tests
+export default () => {}
+
+export const config = { matcher: '/' }

test/integration/edge-runtime-module-errors/pages/api/route.js

@@ -0,0 +1,5 @@
+export default async function handler(request) {
+  return Response.json({ ok: true })
+}
+
+export const config = { runtime: 'experimental-edge' }

test/integration/middleware-module-errors/pages/index.js test/integration/edge-runtime-module-errors/pages/index.js

@@ -5,7 +5,7 @@ import { join } from 'path'
 describe('Middleware validation during build', () => {
   const appDir = join(__dirname, '..')
   const middlewareFile = join(appDir, 'middleware.js')
-  const middlewareError = 'Your middleware is returning a response body'
+  const middlewareError = 'Middleware is returning a response body'
 
   beforeEach(() => remove(join(appDir, '.next')))
 

test/integration/edge-runtime-module-errors/test/index.test.js

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server'
+
+export default function middleware() {
+  return NextResponse.next()
+}

test/integration/middleware-build-errors/test/index.test.js

@@ -0,0 +1 @@
+export function middleware() {}

test/integration/middleware-module-errors/middleware.js

@@ -0,0 +1 @@
+export function middleware() {}

test/integration/middleware-module-errors/test/index.test.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>ok</div>
+}

test/integration/middleware-nested-error/middleware.js

@@ -0,0 +1,65 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import {
+  fetchViaHTTP,
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild,
+} from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const context = {
+  appDir: join(__dirname, '../'),
+  logs: { output: '', stdout: '', stderr: '' },
+}
+
+describe('Middleware importing Node.js modules', () => {
+  afterEach(() => {
+    if (context.app) {
+      killApp(context.app)
+    }
+  })
+
+  describe('dev mode', () => {
+    // restart the app for every test since the latest error is not shown sometimes
+    // See https://github.com/vercel/next.js/issues/36575
+    beforeEach(async () => {
+      context.logs = { stdout: '', stderr: '' }
+      context.appPort = await findPort()
+      context.app = await launchApp(context.appDir, context.appPort, {
+        env: { __NEXT_TEST_WITH_DEVTOOL: 1 },
+        onStdout(msg) {
+          context.logs.stdout += msg
+        },
+        onStderr(msg) {
+          context.logs.stderr += msg
+        },
+      })
+    })
+
+    it('warns about nested middleware being not allowed', async () => {
+      const res = await fetchViaHTTP(context.appPort, '/about')
+      expect(res.status).toBe(200)
+      context.logs.stderr.includes('Nested Middleware is not allowed, found:')
+      context.logs.stderr.includes('pages/about/_middleware')
+      context.logs.stderr.includes('pages/api/_middleware')
+    })
+  })
+
+  describe('production mode', () => {
+    it('fails when there is a not allowed middleware', async () => {
+      const buildResult = await nextBuild(context.appDir, undefined, {
+        stderr: true,
+        stdout: true,
+      })
+      expect(buildResult.stderr).toContain(
+        'Nested Middleware is not allowed, found:'
+      )
+      expect(buildResult.stderr).toContain('pages/about/_middleware')
+      expect(buildResult.stderr).toContain('pages/api/_middleware')
+    })
+  })
+})

test/integration/middleware-nested-error/pages/about/_middleware.js

@@ -36,12 +36,10 @@ describe('Middleware overriding a Node.js API', () => {
       const res = await fetchViaHTTP(context.appPort, '/')
       await waitFor(500)
       expect(res.status).toBe(200)
-      expect(output)
-        .toContain(`NodejsRuntimeApiInMiddlewareWarning: You're using a Node.js API (process.cwd) which is not supported in the Edge Runtime that Middleware uses.
-Learn more: https://nextjs.org/docs/api-reference/edge-runtime`)
+      expect(output).toContain('A Node.js API is used (process.cwd')
       expect(output).toContain('fixed-value')
       expect(output).not.toContain('TypeError')
-      expect(output).not.toContain(`You're using a Node.js API (process.env)`)
+      expect(output).not.toContain(`A Node.js API is used (process.env`)
     })
   })
 })

test/integration/middleware-module-errors/pages/about/index.js test/integration/middleware-nested-error/pages/about/index.js

@@ -85,7 +85,7 @@ describe('Middleware using Node.js API', () => {
       expect(res.status).toBe(500)
       await check(
         () =>
-          output.includes(`NodejsRuntimeApiInMiddlewareWarning: You're using a Node.js API (${api}) which is not supported in the Edge Runtime that Middleware uses.
+          output.includes(`A Node.js API is used (${api}) which is not supported in the Edge Runtime.
 Learn more: https://nextjs.org/docs/api-reference/edge-runtime`)
             ? 'success'
             : output,
@@ -118,7 +118,7 @@ Learn more: https://nextjs.org/docs/api-reference/edge-runtime`)
       )
     )(`warns for $api during build`, ({ api, line }) => {
       expect(buildResult.stderr)
-        .toContain(`You're using a Node.js API (${api} at line: ${line}) which is not supported in the Edge Runtime that Middleware uses.
+        .toContain(`A Node.js API is used (${api} at line: ${line}) which is not supported in the Edge Runtime.
 Learn more: https://nextjs.org/docs/api-reference/edge-runtime`)
     })
   })