archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/errors/node-module-in-edge-runtime.md

20 lines
1.1 KiB
Markdown
Raw Normal View History

Update node-module-in-edge-runtime.md (#41375) To be a bit more clear. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-13 06:22:04 +02:00
# Using Node.js Modules in Edge Runtime
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`)
2022-07-06 22:54:44 +02:00
#### Why This Error Occurred
Update node-module-in-edge-runtime.md (#41375) To be a bit more clear. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-13 06:22:04 +02:00
The code in your [Middleware](https://nextjs.org/docs/advanced-features/middleware) or your [Edge API Routes](https://nextjs.org/docs/api-routes/edge-api-routes) is using a feature from Node.js runtime.
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`)
2022-07-06 22:54:44 +02:00
Update node-module-in-edge-runtime.md (#41375) To be a bit more clear. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-13 06:22:04 +02:00
However, the Edge Runtime does not support [Node.js APIs and globals](https://nextjs.org/docs/api-reference/edge-runtime#unsupported-apis).
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`)
2022-07-06 22:54:44 +02:00
#### Possible Ways to Fix It
Update node-module-in-edge-runtime.md (#41375) To be a bit more clear. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-13 06:22:04 +02:00
When running Next.js locally with `next dev`, 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.
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`)
2022-07-06 22:54:44 +02:00
Fix broken link on `node-module-in-edge-runtime.md` (#46305) I was notified that this link is broken. Not sure if I'm missing something, but the Markdown doesn't look right, changed it to be a normal link. ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm build && pnpm lint` - [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2023-02-23 17:01:51 +01:00
For example, you might replace the Node.js `crypto` module with the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API).
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`)
2022-07-06 22:54:44 +02:00
### Useful Links
Update node-module-in-edge-runtime.md (#41375) To be a bit more clear. Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-13 06:22:04 +02:00
- [Edge Runtime Supported APIs](https://nextjs.org/docs/api-reference/edge-runtime)
- [Next.js Middleware](https://nextjs.org/docs/advanced-features/middleware)
Changes `vercel/examples` links from linking to GitHub repo to template marketplace (#43780) ### Description * Gives us [Vercel] more SEO juice rather than GitHub. * Gives us the freedom to control GitHub repo file structure independent from URLs. ## Feature - [x] Documentation added
2022-12-07 01:27:43 +01:00
- [JWT Example](https://vercel.com/templates/next.js/jwt-authentication)
Reference in a new issue Copy permalink