From 4fcbb5584ebc354622e1ff42f0869f36299aca84 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 19 Jan 2021 12:24:42 +0100 Subject: [PATCH 1/3] Fix buildmanifest for webpack 5 splitchunks Fixes an edge case introduced in #21208 --- .../webpack/plugins/build-manifest-plugin.ts | 42 ++++++------------- 1 file changed, 12 insertions(+), 30 deletions(-) diff --git a/packages/next/build/webpack/plugins/build-manifest-plugin.ts b/packages/next/build/webpack/plugins/build-manifest-plugin.ts index 5cfe31ba85d6..dca60012d6d1 100644 --- a/packages/next/build/webpack/plugins/build-manifest-plugin.ts +++ b/packages/next/build/webpack/plugins/build-manifest-plugin.ts @@ -70,17 +70,6 @@ function isJsFile(file: string): boolean { return !file.endsWith('.hot-update.js') && file.endsWith('.js') } -function getFilesArray(files: any) { - if (!files) { - return [] - } - if (isWebpack5) { - return Array.from(files) - } - - return files -} - // This plugin creates a build-manifest.json for all assets that are being output // It has a mapping of "entry" filename to real filename. Because the real filename can be hashed in production export default class BuildManifestPlugin { @@ -106,8 +95,6 @@ export default class BuildManifestPlugin { return tracer.withSpan(spans.get(compiler), () => { const span = tracer.startSpan('NextJsBuildManifest-createassets') return traceFn(span, () => { - const namedChunks: Map = - compilation.namedChunks const assetMap: DeepMutable = { polyfillFiles: [], devFiles: [], @@ -129,27 +116,22 @@ export default class BuildManifestPlugin { } } - const mainJsChunk = namedChunks.get(CLIENT_STATIC_FILES_RUNTIME_MAIN) - - const mainJsFiles: string[] = getFilesArray(mainJsChunk?.files).filter( - isJsFile - ) - - const polyfillChunk = namedChunks.get( - CLIENT_STATIC_FILES_RUNTIME_POLYFILLS - ) - + const mainJsFiles = compilation.entrypoints + .get(CLIENT_STATIC_FILES_RUNTIME_MAIN) + .getFiles() + .filter(isJsFile) // Create a separate entry for polyfills - assetMap.polyfillFiles = getFilesArray(polyfillChunk?.files).filter( - isJsFile - ) + assetMap.polyfillFiles = compilation.entrypoints + .get(CLIENT_STATIC_FILES_RUNTIME_POLYFILLS) + .getFiles() + .filter(isJsFile) - const reactRefreshChunk = namedChunks.get( + const reactRefreshChunk = compilation.entrypoints.get( CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH ) - assetMap.devFiles = getFilesArray(reactRefreshChunk?.files).filter( - isJsFile - ) + assetMap.devFiles = reactRefreshChunk + ? reactRefreshChunk.getFiles().filter(isJsFile) + : [] for (const entrypoint of compilation.entrypoints.values()) { const isAmpRuntime = From 70252546154c3811b2d3c8236f81c501ba612fd6 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 19 Jan 2021 12:41:41 +0100 Subject: [PATCH 2/3] Exclude webpack runtime from polyfills files --- .../build/webpack/plugins/build-manifest-plugin.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/next/build/webpack/plugins/build-manifest-plugin.ts b/packages/next/build/webpack/plugins/build-manifest-plugin.ts index dca60012d6d1..dcb18f09a299 100644 --- a/packages/next/build/webpack/plugins/build-manifest-plugin.ts +++ b/packages/next/build/webpack/plugins/build-manifest-plugin.ts @@ -124,7 +124,17 @@ export default class BuildManifestPlugin { assetMap.polyfillFiles = compilation.entrypoints .get(CLIENT_STATIC_FILES_RUNTIME_POLYFILLS) .getFiles() - .filter(isJsFile) + .filter((file: string) => { + if (!isJsFile(file)) { + return false + } + + // webpack runtime is already available for polyfills on the page + if (file.includes('/webpack-')) { + return false + } + return true + }) const reactRefreshChunk = compilation.entrypoints.get( CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH From eff8a067151b36fa0a7c4d06829792efa0a59c17 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Tue, 19 Jan 2021 13:40:59 +0100 Subject: [PATCH 3/3] Exclude webpack chunk from devFiles too --- .../build/webpack/plugins/build-manifest-plugin.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/next/build/webpack/plugins/build-manifest-plugin.ts b/packages/next/build/webpack/plugins/build-manifest-plugin.ts index dcb18f09a299..6e6520465024 100644 --- a/packages/next/build/webpack/plugins/build-manifest-plugin.ts +++ b/packages/next/build/webpack/plugins/build-manifest-plugin.ts @@ -130,7 +130,7 @@ export default class BuildManifestPlugin { } // webpack runtime is already available for polyfills on the page - if (file.includes('/webpack-')) { + if (file.includes('/webpack')) { return false } return true @@ -140,7 +140,17 @@ export default class BuildManifestPlugin { CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH ) assetMap.devFiles = reactRefreshChunk - ? reactRefreshChunk.getFiles().filter(isJsFile) + ? reactRefreshChunk.getFiles().filter((file: string) => { + if (!isJsFile(file)) { + return false + } + + // webpack runtime is already available for polyfills on the page + if (file.includes('/webpack')) { + return false + } + return true + }) : [] for (const entrypoint of compilation.entrypoints.values()) {