Skip to content

Commit

Permalink
Externalize node binary modules for app router (#70646)
Browse files Browse the repository at this point in the history
backport #70330 
Fixes #69912

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
  • Loading branch information
huozhi and ijjk authored Oct 1, 2024
1 parent 0ffea65 commit e1da07e
Show file tree
Hide file tree
Showing 15 changed files with 139 additions and 0 deletions.
13 changes: 13 additions & 0 deletions packages/next/src/build/webpack-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1192,6 +1192,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`
alias[loader] = path.join(__dirname, 'webpack', 'loaders', loader)
Expand Down Expand Up @@ -1276,6 +1278,17 @@ export default async function getBaseWebpackConfig(
or: WEBPACK_LAYERS.GROUP.nonClientServerTarget,
},
},
{
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: isWebpackAppLayer,
}),
},
...(hasAppDir
? [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -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`
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
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
)})`
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { ReactNode } from 'react'
export default function Root({ children }: { children: ReactNode }) {
return (
<html>
<body>{children}</body>
</html>
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use client'

import { foo } from 'foo-browser-import-binary'

export default function Page() {
return <p>{foo()}</p>
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { nextTestSetup } from 'e2e-utils'
import {
hasRedbox,
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 hasRedbox(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"
`)
})
}
)

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions test/e2e/app-dir/externalize-node-binary/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { ReactNode } from 'react'
export default function Root({ children }: { children: ReactNode }) {
return (
<html>
<body>{children}</body>
</html>
)
}
5 changes: 5 additions & 0 deletions test/e2e/app-dir/externalize-node-binary/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { foo } from 'foo'

export default function Page() {
return <p>{foo()}</p>
}
Original file line number Diff line number Diff line change
@@ -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')
})
})

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit e1da07e

Please sign in to comment.