Bypass webpack compilation for precompiled @next/polyfills-nomodule

Removes the extra webpack handling that was previously done, this ensures the file which is already minified and compiled does not get passed through minification again.

Largely based on vercel#21418
Closes vercel#21418

Co-Authored-By: Joe Haddad <timer150@gmail.com>

packages/next/build/webpack-config.ts

@@ -19,7 +19,7 @@ import { getTypeScriptConfiguration } from '../lib/typescript/getTypeScriptConfi
 import {
   CLIENT_STATIC_FILES_RUNTIME_AMP,
   CLIENT_STATIC_FILES_RUNTIME_MAIN,
-  CLIENT_STATIC_FILES_RUNTIME_POLYFILLS,
+  CLIENT_STATIC_FILES_RUNTIME_POLYFILLS_SYMBOL,
   CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH,
   CLIENT_STATIC_FILES_RUNTIME_WEBPACK,
   REACT_LOADABLE_MANIFEST,
@@ -52,6 +52,7 @@ import WebpackConformancePlugin, {
 } from './webpack/plugins/webpack-conformance-plugin'
 import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin'
 import { regexLikeCss } from './webpack/config/blocks/css'
+import { CopyFilePlugin } from './webpack/plugins/copy-file-plugin'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
@@ -364,10 +365,6 @@ export default async function getBaseWebpackConfig(
               )
             )
             .replace(/\\/g, '/'),
-        [CLIENT_STATIC_FILES_RUNTIME_POLYFILLS]: path.join(
-          NEXT_PROJECT_ROOT_DIST_CLIENT,
-          'polyfills.js'
-        ),
       } as ClientEntries)
     : undefined
 
@@ -1324,6 +1321,13 @@ export default async function getBaseWebpackConfig(
           ].filter(Boolean),
         }),
       new WellKnownErrorsPlugin(),
+      !isServer &&
+        new CopyFilePlugin({
+          source: require.resolve('./polyfills/polyfill-nomodule'),
+          name: `static/chunks/polyfills${dev ? '' : '-[hash]'}.js`,
+          minimize: false,
+          info: { [CLIENT_STATIC_FILES_RUNTIME_POLYFILLS_SYMBOL]: 1 },
+        }),
     ].filter((Boolean as any) as ExcludesFalse),
   }
 

packages/next/build/webpack/plugins/build-manifest-plugin.ts

@@ -8,7 +8,7 @@ import {
   BUILD_MANIFEST,
   CLIENT_STATIC_FILES_PATH,
   CLIENT_STATIC_FILES_RUNTIME_MAIN,
-  CLIENT_STATIC_FILES_RUNTIME_POLYFILLS,
+  CLIENT_STATIC_FILES_RUNTIME_POLYFILLS_SYMBOL,
   CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH,
   CLIENT_STATIC_FILES_RUNTIME_AMP,
 } from '../../../shared/lib/constants'
@@ -146,9 +146,24 @@ export default class BuildManifestPlugin {
         getEntrypointFiles(entrypoints.get(CLIENT_STATIC_FILES_RUNTIME_MAIN))
       )
 
-      assetMap.polyfillFiles = getEntrypointFiles(
-        entrypoints.get(CLIENT_STATIC_FILES_RUNTIME_POLYFILLS)
-      ).filter((file) => !mainFiles.has(file))
+      const compilationAssets: {
+        name: string
+        source: typeof sources.RawSource
+        info: object
+      }[] = compilation.getAssets()
+
+      assetMap.polyfillFiles = compilationAssets
+        .filter((p) => {
+          // Ensure only .js files are passed through
+          if (!p.name.endsWith('.js')) {
+            return false
+          }
+
+          return (
+            p.info && CLIENT_STATIC_FILES_RUNTIME_POLYFILLS_SYMBOL in p.info
+          )
+        })
+        .map((v) => v.name)
 
       assetMap.devFiles = getEntrypointFiles(
         entrypoints.get(CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH)
@@ -160,7 +175,6 @@ export default class BuildManifestPlugin {
 
       const systemEntrypoints = new Set([
         CLIENT_STATIC_FILES_RUNTIME_MAIN,
-        CLIENT_STATIC_FILES_RUNTIME_POLYFILLS,
         CLIENT_STATIC_FILES_RUNTIME_REACT_REFRESH,
         CLIENT_STATIC_FILES_RUNTIME_AMP,
       ])

packages/next/build/webpack/plugins/copy-file-plugin.ts

@@ -0,0 +1,65 @@
+import { promises as fs } from 'fs'
+import loaderUtils from 'next/dist/compiled/loader-utils'
+import {
+  isWebpack5,
+  sources,
+  webpack,
+} from 'next/dist/compiled/webpack/webpack'
+
+const PLUGIN_NAME = 'CopyFilePlugin'
+
+export class CopyFilePlugin {
+  private source: string
+  private name: string
+  private minimize: boolean
+  private info?: object
+
+  constructor({
+    source,
+    name,
+    minimize,
+    info,
+  }: {
+    source: string
+    name: string
+    minimize: boolean
+    info?: object
+  }) {
+    this.source = source
+    this.name = name
+    this.minimize = minimize
+    this.info = info
+  }
+
+  apply(compiler: webpack.Compiler) {
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      const hook = isWebpack5
+        ? // @ts-ignore
+          compilation.hooks.processAssets
+        : compilation.hooks.additionalAssets
+      hook.tapPromise(
+        isWebpack5
+          ? {
+              name: PLUGIN_NAME,
+              // @ts-ignore TODO: Remove ignore when webpack 5 is stable
+              stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+            }
+          : PLUGIN_NAME,
+        async () => {
+          const content = await fs.readFile(this.source, 'utf8')
+
+          const file = loaderUtils.interpolateName(
+            { resourcePath: this.source },
+            this.name,
+            { content, context: compiler.context }
+          )
+
+          // @ts-ignore
+          compilation.emitAsset(file, new sources.RawSource(content), {
+            ...this.info,
+          })
+        }
+      )
+    })
+  }
+}

packages/next/shared/lib/constants.ts

@@ -32,7 +32,7 @@ export const CLIENT_STATIC_FILES_RUNTIME_AMP = `amp`
 // static/runtime/webpack.js
 export const CLIENT_STATIC_FILES_RUNTIME_WEBPACK = `webpack`
 // static/runtime/polyfills.js
-export const CLIENT_STATIC_FILES_RUNTIME_POLYFILLS = `polyfills`
+export const CLIENT_STATIC_FILES_RUNTIME_POLYFILLS_SYMBOL = Symbol(`polyfills`)
 export const TEMPORARY_REDIRECT_STATUS = 307
 export const PERMANENT_REDIRECT_STATUS = 308
 export const STATIC_PROPS_ID = '__N_SSG'