Prepare for webpack 5 upgrade (#14268)

Tweaked the config that can already be updated a bit.

Author: timneutkens

packages/next/build/compiler.ts

@@ -18,34 +18,49 @@ function generateStats(result: CompilerResult, stat: Stats): CompilerResult {
   return result
 }
 
+// Webpack 5 requires the compiler to be closed (to save caches)
+// Webpack 4 does not have this close method so in order to be backwards compatible we check if it exists
+function closeCompiler(compiler: webpack.Compiler | webpack.MultiCompiler) {
+  return new Promise((resolve, reject) => {
+    if ('close' in compiler) {
+      // @ts-ignore Close only exists on the compiler in webpack 5
+      return compiler.close((err: any) => (err ? reject(err) : resolve()))
+    }
+
+    resolve()
+  })
+}
+
 export function runCompiler(
   config: Configuration | Configuration[]
 ): Promise<CompilerResult> {
-  return new Promise(async (resolve, reject) => {
+  return new Promise((resolve, reject) => {
     const compiler = webpack(config)
     compiler.run(
       (err: Error, statsOrMultiStats: { stats: Stats[] } | Stats) => {
-        if (err) {
-          const reason = err?.toString()
-          if (reason) {
-            return resolve({ errors: [reason], warnings: [] })
+        closeCompiler(compiler).then(() => {
+          if (err) {
+            const reason = err?.toString()
+            if (reason) {
+              return resolve({ errors: [reason], warnings: [] })
+            }
+            return reject(err)
           }
-          return reject(err)
-        }
 
-        if ('stats' in statsOrMultiStats) {
-          const result: CompilerResult = statsOrMultiStats.stats.reduce(
-            generateStats,
-            { errors: [], warnings: [] }
+          if ('stats' in statsOrMultiStats) {
+            const result: CompilerResult = statsOrMultiStats.stats.reduce(
+              generateStats,
+              { errors: [], warnings: [] }
+            )
+            return resolve(result)
+          }
+
+          const result = generateStats(
+            { errors: [], warnings: [] },
+            statsOrMultiStats
           )
           return resolve(result)
-        }
-
-        const result = generateStats(
-          { errors: [], warnings: [] },
-          statsOrMultiStats
-        )
-        return resolve(result)
+        })
       }
     )
   })

packages/next/build/webpack-config.ts

@@ -4,7 +4,6 @@ import { readFileSync } from 'fs'
 import chalk from 'next/dist/compiled/chalk'
 import TerserPlugin from 'next/dist/compiled/terser-webpack-plugin'
 import path from 'path'
-import PnpWebpackPlugin from 'pnp-webpack-plugin'
 import webpack from 'webpack'
 import {
   DOT_NEXT_ALIAS,
@@ -37,7 +36,6 @@ import ChunkNamesPlugin from './webpack/plugins/chunk-names-plugin'
 import { CssMinimizerPlugin } from './webpack/plugins/css-minimizer-plugin'
 import { JsConfigPathsPlugin } from './webpack/plugins/jsconfig-paths-plugin'
 import { DropClientPage } from './webpack/plugins/next-drop-client-page-plugin'
-import NextEsmPlugin from './webpack/plugins/next-esm-plugin'
 import NextJsSsrImportPlugin from './webpack/plugins/nextjs-ssr-import'
 import NextJsSSRModuleCachePlugin from './webpack/plugins/nextjs-ssr-module-cache'
 import PagesManifestPlugin from './webpack/plugins/pages-manifest-plugin'
@@ -302,7 +300,7 @@ export default async function getBaseWebpackConfig(
     plugins: isWebpack5
       ? // webpack 5+ has the PnP resolver built-in by default:
         []
-      : [PnpWebpackPlugin],
+      : [require('pnp-webpack-plugin')],
   }
 
   const webpackMode = dev ? 'development' : 'production'
@@ -347,13 +345,17 @@ export default async function getBaseWebpackConfig(
       cacheGroups: {
         default: false,
         vendors: false,
+        // In webpack 5 vendors was renamed to defaultVendors
+        defaultVendors: false,
       },
     },
     prodGranular: {
       chunks: 'all',
       cacheGroups: {
         default: false,
         vendors: false,
+        // In webpack 5 vendors was renamed to defaultVendors
+        defaultVendors: false,
         framework: {
           chunks: 'all',
           name: 'framework',
@@ -736,7 +738,7 @@ export default async function getBaseWebpackConfig(
         'node_modules',
         ...nodePathList, // Support for NODE_PATH environment variable
       ],
-      plugins: [PnpWebpackPlugin],
+      plugins: isWebpack5 ? [] : [require('pnp-webpack-plugin')],
     },
     module: {
       rules: [
@@ -881,7 +883,10 @@ export default async function getBaseWebpackConfig(
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       config.future.excludeDefaultMomentLocales &&
-        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+        new webpack.IgnorePlugin({
+          resourceRegExp: /^\.\/locale$/,
+          contextRegExp: /moment$/,
+        }),
       ...(dev
         ? (() => {
             // Even though require.cache is server only we have to clear assets from both compilations
@@ -931,22 +936,25 @@ export default async function getBaseWebpackConfig(
       config.experimental.modern &&
         !isServer &&
         !dev &&
-        new NextEsmPlugin({
-          filename: (getFileName: Function | string) => (...args: any[]) => {
-            const name =
-              typeof getFileName === 'function'
-                ? getFileName(...args)
-                : getFileName
-
-            return name.includes('.js')
-              ? name.replace(/\.js$/, '.module.js')
-              : escapePathVariables(
-                  args[0].chunk.name.replace(/\.js$/, '.module.js')
-                )
-          },
-          chunkFilename: (inputChunkName: string) =>
-            inputChunkName.replace(/\.js$/, '.module.js'),
-        }),
+        (() => {
+          const { NextEsmPlugin } = require('./webpack/plugins/next-esm-plugin')
+          return new NextEsmPlugin({
+            filename: (getFileName: Function | string) => (...args: any[]) => {
+              const name =
+                typeof getFileName === 'function'
+                  ? getFileName(...args)
+                  : getFileName
+
+              return name.includes('.js')
+                ? name.replace(/\.js$/, '.module.js')
+                : escapePathVariables(
+                    args[0].chunk.name.replace(/\.js$/, '.module.js')
+                  )
+            },
+            chunkFilename: (inputChunkName: string) =>
+              inputChunkName.replace(/\.js$/, '.module.js'),
+          })
+        })(),
       config.experimental.conformance &&
         !dev &&
         new WebpackConformancePlugin({

packages/next/build/webpack/config/blocks/css/index.ts

@@ -89,7 +89,7 @@ export const css = curry(async function css(
           test: regexLikeCss,
           // Use a loose regex so we don't have to crawl the file system to
           // find the real file name (if present).
-          issuer: { test: /pages[\\/]_document\./ },
+          issuer: /pages[\\/]_document\./,
           use: {
             loader: 'error-loader',
             options: {
@@ -117,8 +117,8 @@ export const css = curry(async function css(
           // CSS Modules are only supported in the user's application. We're
           // not yet allowing CSS imports _within_ `node_modules`.
           issuer: {
-            include: [ctx.rootDirectory],
-            exclude: /node_modules/,
+            and: [ctx.rootDirectory],
+            not: [/node_modules/],
           },
           use: getCssModuleLoader(ctx, postCssPlugins),
         },
@@ -140,8 +140,8 @@ export const css = curry(async function css(
           // Sass Modules are only supported in the user's application. We're
           // not yet allowing Sass imports _within_ `node_modules`.
           issuer: {
-            include: [ctx.rootDirectory],
-            exclude: /node_modules/,
+            and: [ctx.rootDirectory],
+            not: [/node_modules/],
           },
           use: getCssModuleLoader(ctx, postCssPlugins, sassPreprocessors),
         },
@@ -188,7 +188,7 @@ export const css = curry(async function css(
             // See https://github.com/webpack/webpack/issues/6571
             sideEffects: true,
             test: regexCssGlobal,
-            issuer: { include: ctx.customAppFile },
+            issuer: { and: [ctx.customAppFile] },
             use: getGlobalCssLoader(ctx, postCssPlugins),
           },
         ],
@@ -204,7 +204,7 @@ export const css = curry(async function css(
             // See https://github.com/webpack/webpack/issues/6571
             sideEffects: true,
             test: regexSassGlobal,
-            issuer: { include: ctx.customAppFile },
+            issuer: { and: [ctx.customAppFile] },
             use: getGlobalCssLoader(ctx, postCssPlugins, sassPreprocessors),
           },
         ],
@@ -218,7 +218,7 @@ export const css = curry(async function css(
       oneOf: [
         {
           test: [regexCssGlobal, regexSassGlobal].filter(Boolean),
-          issuer: { include: [/node_modules/] },
+          issuer: { and: [/node_modules/] },
           use: {
             loader: 'error-loader',
             options: {
@@ -258,7 +258,7 @@ export const css = curry(async function css(
         oneOf: [
           {
             // This should only be applied to CSS files
-            issuer: { test: regexLikeCss },
+            issuer: regexLikeCss,
             // Exclude extensions that webpack handles by default
             exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
             use: {

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

@@ -59,7 +59,7 @@ const PRESETS_WITH_USEBUILTINS = /(^|[\\/])(@babel\/(preset-)?react)([\\/]|$)/
 // Matches Babel plugin paths that support the useBuiltIns option
 const PLUGINS_WITH_USEBUILTINS = /(^|[\\/])(@babel\/(plugin-)?transform-react-jsx)([\\/]|$)/
 
-export default class NextEsmPlugin implements Plugin {
+export class NextEsmPlugin implements Plugin {
   options: {
     filename: any
     chunkFilename: any