Externalize node binary modules for app router (#70330)

vercel · Sep 23, 2024 · 4380d0b · 4380d0b
1 parent f80bc82
commit 4380d0b
Show file tree

Hide file tree

Showing 16 changed files with 149 additions and 2 deletions.
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -1197,6 +1197,8 @@ export default async function getBaseWebpackConfig(
         'next-metadata-route-loader',
         'modularize-import-loader',
         'next-barrel-loader',
+        'next-server-binary-loader',
+        'next-error-browser-binary-loader',
       ].reduce(
         (alias, loader) => {
           // using multiple aliases to replace `resolveLoader.modules`
@@ -1284,6 +1286,17 @@ export default async function getBaseWebpackConfig(
             or: WEBPACK_LAYERS.GROUP.neutralTarget,
           },
         },
+        {
+          test: /[\\/].*?\.node$/,
+          loader: isNodeServer
+            ? 'next-server-binary-loader'
+            : 'next-error-browser-binary-loader',
+          // On server side bundling, only apply to app router, do not apply to pages router;
+          // On client side or edge runtime bundling, always error.
+          ...(isNodeServer && {
+            issuerLayer: isWebpackBundledLayer,
+          }),
+        },
         ...(hasAppDir
           ? [
               {

diff --git a/packages/next/src/build/webpack/loaders/next-error-browser-binary-loader.ts b/packages/next/src/build/webpack/loaders/next-error-browser-binary-loader.ts
@@ -0,0 +1,11 @@
+import type { webpack } from 'next/dist/compiled/webpack/webpack'
+
+export default function nextErrorBrowserBinaryLoader(
+  this: webpack.LoaderContext<any>
+) {
+  const { resourcePath, rootContext } = this
+  const relativePath = resourcePath.slice(rootContext.length + 1)
+  throw new Error(
+    `Node.js binary module ./${relativePath} is not supported in the browser. Please only use the module on server side`
+  )
+}
diff --git a/packages/next/src/build/webpack/loaders/next-server-binary-loader.ts b/packages/next/src/build/webpack/loaders/next-server-binary-loader.ts
@@ -0,0 +1,12 @@
+import type { webpack } from 'next/dist/compiled/webpack/webpack'
+import path from 'path'
+
+export default function nextErrorBrowserBinaryLoader(
+  this: webpack.LoaderContext<any>
+) {
+  let relativePath = path.relative(this.rootContext, this.resourcePath)
+  if (!relativePath.startsWith('.')) {
+    relativePath = './' + relativePath
+  }
+  return `module.exports = __non_webpack_require__(${JSON.stringify(relativePath)})`
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/development/app-dir/externalize-node-binary-browser-error/app/layout.tsx b/test/development/app-dir/externalize-node-binary-browser-error/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/externalize-node-binary-browser-error/app/page.tsx b/test/development/app-dir/externalize-node-binary-browser-error/app/page.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { foo } from 'foo-browser-import-binary'
+
+export default function Page() {
+  return <p>{foo()}</p>
+}
diff --git a/...p-dir/externalize-node-binary-browser-error/externalize-node-binary-browser-error.test.ts b/...p-dir/externalize-node-binary-browser-error/externalize-node-binary-browser-error.test.ts
@@ -0,0 +1,29 @@
+import { nextTestSetup } from 'e2e-utils'
+import {
+  assertHasRedbox,
+  getRedboxDescription,
+  getRedboxSource,
+} from 'next-test-utils'
+;(process.env.TURBOPACK ? describe.skip : describe)(
+  'externalize-node-binary-browser-error',
+  () => {
+    const { next } = nextTestSetup({
+      files: __dirname,
+    })
+
+    it('should error when import node binary on browser side', async () => {
+      const browser = await next.browser('/')
+      await assertHasRedbox(browser)
+      const redbox = {
+        description: await getRedboxDescription(browser),
+        source: await getRedboxSource(browser),
+      }
+
+      expect(redbox.description).toBe('Failed to compile')
+      expect(redbox.source).toMatchInlineSnapshot(`
+        "./node_modules/foo-browser-import-binary/binary.node
+        Error: Node.js binary module ./node_modules/foo-browser-import-binary/binary.node is not supported in the browser. Please only use the module on server side"
+      `)
+    })
+  }
+)
diff --git a/.../externalize-node-binary-browser-error/node_modules/foo-browser-import-binary/binary.node b/.../externalize-node-binary-browser-error/node_modules/foo-browser-import-binary/binary.node
diff --git a/...dir/externalize-node-binary-browser-error/node_modules/foo-browser-import-binary/index.js b/...dir/externalize-node-binary-browser-error/node_modules/foo-browser-import-binary/index.js
diff --git a/...externalize-node-binary-browser-error/node_modules/foo-browser-import-binary/package.json b/...externalize-node-binary-browser-error/node_modules/foo-browser-import-binary/package.json
diff --git a/test/e2e/app-dir/externalize-node-binary/app/layout.tsx b/test/e2e/app-dir/externalize-node-binary/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/externalize-node-binary/app/page.tsx b/test/e2e/app-dir/externalize-node-binary/app/page.tsx
@@ -0,0 +1,5 @@
+import { foo } from 'foo'
+
+export default function Page() {
+  return <p>{foo()}</p>
+}
diff --git a/test/e2e/app-dir/externalize-node-binary/externalize-node-binary.test.ts b/test/e2e/app-dir/externalize-node-binary/externalize-node-binary.test.ts
@@ -0,0 +1,15 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('externalize-node-binary', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should render correctly when node_modules require node binary module', async () => {
+    const { status } = await next.fetch('/')
+    expect(status).toBe(200)
+
+    const browser = await next.browser('/')
+    expect(await browser.elementByCss('p').text()).toBe('I am foo')
+  })
+})
diff --git a/test/e2e/app-dir/externalize-node-binary/node_modules/foo/binary.node b/test/e2e/app-dir/externalize-node-binary/node_modules/foo/binary.node
diff --git a/test/e2e/app-dir/externalize-node-binary/node_modules/foo/index.js b/test/e2e/app-dir/externalize-node-binary/node_modules/foo/index.js
diff --git a/test/e2e/app-dir/externalize-node-binary/node_modules/foo/package.json b/test/e2e/app-dir/externalize-node-binary/node_modules/foo/package.json