From 5ffe1e4bfff1a61aa6a529585d1dcff2091b714d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Tue, 2 Aug 2022 13:01:54 +0200 Subject: [PATCH 1/7] add `experimental.fallbackOldPolyfills` flag --- packages/next/build/webpack-config.ts | 123 ++++++++++++++------------ packages/next/server/config-shared.ts | 6 ++ 2 files changed, 74 insertions(+), 55 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index ce9f126805cf..93432fcaec2b 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1405,61 +1405,74 @@ export default async function getBaseWebpackConfig( }, { resolve: { - // Full list of old polyfills is accessible here: - // https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42 - fallback: { - assert: require.resolve('next/dist/compiled/assert'), - buffer: require.resolve('next/dist/compiled/buffer/'), - constants: require.resolve( - 'next/dist/compiled/constants-browserify' - ), - crypto: require.resolve( - 'next/dist/compiled/crypto-browserify' - ), - domain: require.resolve( - 'next/dist/compiled/domain-browser' - ), - http: require.resolve('next/dist/compiled/stream-http'), - https: require.resolve( - 'next/dist/compiled/https-browserify' - ), - os: require.resolve('next/dist/compiled/os-browserify'), - path: require.resolve( - 'next/dist/compiled/path-browserify' - ), - punycode: require.resolve( - 'next/dist/compiled/punycode' - ), - process: require.resolve('./polyfills/process'), - // Handled in separate alias - querystring: require.resolve( - 'next/dist/compiled/querystring-es3' - ), - stream: require.resolve( - 'next/dist/compiled/stream-browserify' - ), - string_decoder: require.resolve( - 'next/dist/compiled/string_decoder' - ), - sys: require.resolve('next/dist/compiled/util/'), - timers: require.resolve( - 'next/dist/compiled/timers-browserify' - ), - tty: require.resolve( - 'next/dist/compiled/tty-browserify' - ), - // Handled in separate alias - // url: require.resolve('url/'), - util: require.resolve('next/dist/compiled/util/'), - vm: require.resolve('next/dist/compiled/vm-browserify'), - zlib: require.resolve( - 'next/dist/compiled/browserify-zlib' - ), - events: require.resolve('next/dist/compiled/events/'), - setImmediate: require.resolve( - 'next/dist/compiled/setimmediate' - ), - }, + fallback: + config.experimental.fallbackOldPolyfills === false + ? {} + : { + assert: require.resolve( + 'next/dist/compiled/assert' + ), + buffer: require.resolve( + 'next/dist/compiled/buffer/' + ), + constants: require.resolve( + 'next/dist/compiled/constants-browserify' + ), + crypto: require.resolve( + 'next/dist/compiled/crypto-browserify' + ), + domain: require.resolve( + 'next/dist/compiled/domain-browser' + ), + http: require.resolve( + 'next/dist/compiled/stream-http' + ), + https: require.resolve( + 'next/dist/compiled/https-browserify' + ), + os: require.resolve( + 'next/dist/compiled/os-browserify' + ), + path: require.resolve( + 'next/dist/compiled/path-browserify' + ), + punycode: require.resolve( + 'next/dist/compiled/punycode' + ), + process: require.resolve('./polyfills/process'), + // Handled in separate alias + querystring: require.resolve( + 'next/dist/compiled/querystring-es3' + ), + stream: require.resolve( + 'next/dist/compiled/stream-browserify' + ), + string_decoder: require.resolve( + 'next/dist/compiled/string_decoder' + ), + sys: require.resolve('next/dist/compiled/util/'), + timers: require.resolve( + 'next/dist/compiled/timers-browserify' + ), + tty: require.resolve( + 'next/dist/compiled/tty-browserify' + ), + // Handled in separate alias + // url: require.resolve('url/'), + util: require.resolve('next/dist/compiled/util/'), + vm: require.resolve( + 'next/dist/compiled/vm-browserify' + ), + zlib: require.resolve( + 'next/dist/compiled/browserify-zlib' + ), + events: require.resolve( + 'next/dist/compiled/events/' + ), + setImmediate: require.resolve( + 'next/dist/compiled/setimmediate' + ), + }, }, }, ], diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index e0999cba59b5..114001920b27 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -146,6 +146,12 @@ export interface ExperimentalConfig { } swcPlugins?: Array<[string, Record]> largePageDataBytes?: number + /** + * If set to `false`, webpack won't fall back to polyfill Node.js modules in the browser + * Full list of old polyfills is accessible here: + * [webpack/webpack#ModuleNotoundError.js#L13-L42](https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42) + */ + fallbackOldPolyfills?: boolean } export type ExportPathMap = { From ef08d548b474aecc28002468ed115b97cd560104 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Thu, 25 Aug 2022 20:43:54 +0100 Subject: [PATCH 2/7] add to config schema --- packages/next/server/config-schema.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts index db74156d29e3..943d9317cc99 100644 --- a/packages/next/server/config-schema.ts +++ b/packages/next/server/config-schema.ts @@ -258,6 +258,9 @@ const configSchema = { externalDir: { type: 'boolean', }, + fallbackOldPolyfills: { + type: 'boolean', + }, forceSwcTransforms: { type: 'boolean', }, From e438c8cfb6775b6a1bec5bf38d93c24ab640211c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Thu, 25 Aug 2022 22:39:30 +0100 Subject: [PATCH 3/7] add test --- .../disable-fallback-polyfills/index.test.ts | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 test/production/disable-fallback-polyfills/index.test.ts diff --git a/test/production/disable-fallback-polyfills/index.test.ts b/test/production/disable-fallback-polyfills/index.test.ts new file mode 100644 index 000000000000..112b8e274e33 --- /dev/null +++ b/test/production/disable-fallback-polyfills/index.test.ts @@ -0,0 +1,49 @@ +import { createNext } from 'e2e-utils' +import { NextInstance } from 'test/lib/next-modes/base' + +describe('Disable fallback polyfills', () => { + let next: NextInstance + + beforeAll(async () => { + next = await createNext({ + files: { + 'pages/index.js': ` + import { useEffect } from 'react' + import crypto from 'crypto' + + export default function Page() { + useEffect(() => { + crypto; + }, []) + return

hello world

+ } + `, + }, + dependencies: {}, + }) + await next.stop() + }) + afterAll(() => next.destroy()) + + it('Polyfills are added by default', async () => { + const firstLoadJSSize = Number( + next.cliOutput.match(/○ \/\s{38}(\d*) kB\s{10}(?\d*) kB/) + .groups.firstLoad + ) + expect(firstLoadJSSize).not.toBeLessThan(200) + }) + + it('When Polyfilling is disabled, build should fail', async () => { + await next.patchFile( + 'next.config.js', + `module.exports = { + experimental: { + fallbackOldPolyfills: false + } + }` + ) + + await next.setup() + expect(next.cliOutput).toContain("Module not found: Can't resolve 'crypto'") + }) +}) From 19b98aced54ca040a94d07a828dc466f6bcb391c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Thu, 25 Aug 2022 23:37:12 +0100 Subject: [PATCH 4/7] fix test --- test/production/disable-fallback-polyfills/index.test.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/test/production/disable-fallback-polyfills/index.test.ts b/test/production/disable-fallback-polyfills/index.test.ts index 112b8e274e33..b2eb8d4f6038 100644 --- a/test/production/disable-fallback-polyfills/index.test.ts +++ b/test/production/disable-fallback-polyfills/index.test.ts @@ -25,7 +25,7 @@ describe('Disable fallback polyfills', () => { }) afterAll(() => next.destroy()) - it('Polyfills are added by default', async () => { + it('Fallback polyfills added by default', async () => { const firstLoadJSSize = Number( next.cliOutput.match(/○ \/\s{38}(\d*) kB\s{10}(?\d*) kB/) .groups.firstLoad @@ -33,7 +33,7 @@ describe('Disable fallback polyfills', () => { expect(firstLoadJSSize).not.toBeLessThan(200) }) - it('When Polyfilling is disabled, build should fail', async () => { + it('Build should fail, when fallback polyfilling is disabled', async () => { await next.patchFile( 'next.config.js', `module.exports = { @@ -43,7 +43,6 @@ describe('Disable fallback polyfills', () => { }` ) - await next.setup() - expect(next.cliOutput).toContain("Module not found: Can't resolve 'crypto'") + await expect(next.start()).rejects.toThrow(/next build failed/) }) }) From 1be149c2151877300f8cbb4e08a20e3755e654af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Fri, 26 Aug 2022 16:50:05 +0100 Subject: [PATCH 5/7] remove `Old` --- packages/next/build/webpack-config.ts | 2 +- packages/next/server/config-schema.ts | 2 +- packages/next/server/config-shared.ts | 2 +- test/production/disable-fallback-polyfills/index.test.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index cb124eb34d4f..e229cf111b5d 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1578,7 +1578,7 @@ export default async function getBaseWebpackConfig( { resolve: { fallback: - config.experimental.fallbackOldPolyfills === false + config.experimental.fallbackPolyfills === false ? {} : { assert: require.resolve( diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts index 943d9317cc99..85a083a3ab67 100644 --- a/packages/next/server/config-schema.ts +++ b/packages/next/server/config-schema.ts @@ -258,7 +258,7 @@ const configSchema = { externalDir: { type: 'boolean', }, - fallbackOldPolyfills: { + fallbackPolyfills: { type: 'boolean', }, forceSwcTransforms: { diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index 5cb168f4da07..371b555bbc73 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -150,7 +150,7 @@ export interface ExperimentalConfig { * Full list of old polyfills is accessible here: * [webpack/webpack#ModuleNotoundError.js#L13-L42](https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42) */ - fallbackOldPolyfills?: boolean + fallbackPolyfills?: boolean } export type ExportPathMap = { diff --git a/test/production/disable-fallback-polyfills/index.test.ts b/test/production/disable-fallback-polyfills/index.test.ts index b2eb8d4f6038..6747b2fc053c 100644 --- a/test/production/disable-fallback-polyfills/index.test.ts +++ b/test/production/disable-fallback-polyfills/index.test.ts @@ -38,7 +38,7 @@ describe('Disable fallback polyfills', () => { 'next.config.js', `module.exports = { experimental: { - fallbackOldPolyfills: false + fallbackPolyfills: false } }` ) From 71b7c877e7503014805ed969c4612915494f1edb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Fri, 26 Aug 2022 22:40:45 +0100 Subject: [PATCH 6/7] rename to `fallbackNodePolyfills` --- packages/next/build/webpack-config.ts | 2 +- packages/next/server/config-schema.ts | 2 +- packages/next/server/config-shared.ts | 2 +- test/production/disable-fallback-polyfills/index.test.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index e229cf111b5d..e873787ae58b 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1578,7 +1578,7 @@ export default async function getBaseWebpackConfig( { resolve: { fallback: - config.experimental.fallbackPolyfills === false + config.experimental.fallbackNodePolyfills === false ? {} : { assert: require.resolve( diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts index 85a083a3ab67..56def7e1fdef 100644 --- a/packages/next/server/config-schema.ts +++ b/packages/next/server/config-schema.ts @@ -258,7 +258,7 @@ const configSchema = { externalDir: { type: 'boolean', }, - fallbackPolyfills: { + fallbackNodePolyfills: { type: 'boolean', }, forceSwcTransforms: { diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index 371b555bbc73..f8e74801a34b 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -150,7 +150,7 @@ export interface ExperimentalConfig { * Full list of old polyfills is accessible here: * [webpack/webpack#ModuleNotoundError.js#L13-L42](https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42) */ - fallbackPolyfills?: boolean + fallbackNodePolyfills?: boolean } export type ExportPathMap = { diff --git a/test/production/disable-fallback-polyfills/index.test.ts b/test/production/disable-fallback-polyfills/index.test.ts index 6747b2fc053c..b22fd400cb09 100644 --- a/test/production/disable-fallback-polyfills/index.test.ts +++ b/test/production/disable-fallback-polyfills/index.test.ts @@ -38,7 +38,7 @@ describe('Disable fallback polyfills', () => { 'next.config.js', `module.exports = { experimental: { - fallbackPolyfills: false + fallbackNodePolyfills: false } }` ) From 4146c6fa2ccfeb458a5949be3f63a3546d830cbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Fri, 26 Aug 2022 23:51:18 +0100 Subject: [PATCH 7/7] Update config-shared.ts --- packages/next/server/config-shared.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/server/config-shared.ts b/packages/next/server/config-shared.ts index f8e74801a34b..fe2238449320 100644 --- a/packages/next/server/config-shared.ts +++ b/packages/next/server/config-shared.ts @@ -150,7 +150,7 @@ export interface ExperimentalConfig { * Full list of old polyfills is accessible here: * [webpack/webpack#ModuleNotoundError.js#L13-L42](https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42) */ - fallbackNodePolyfills?: boolean + fallbackNodePolyfills?: false } export type ExportPathMap = {