the way towards webpack 5 typings

packages/next/build/entries.ts

@@ -10,6 +10,7 @@ import { ClientPagesLoaderOptions } from './webpack/loaders/next-client-pages-lo
 import { ServerlessLoaderQuery } from './webpack/loaders/next-serverless-loader'
 import { LoadedEnvFiles } from '@next/env'
 import { NextConfigComplete } from '../server/config-shared'
+import type webpack5 from 'webpack5'
 
 type PagesMapping = {
   [page: string]: string
@@ -62,19 +63,9 @@ export function createPagesMapping(
   return pages
 }
 
-export type WebpackEntrypoints = {
-  [bundle: string]:
-    | string
-    | string[]
-    | {
-        import: string | string[]
-        dependOn?: string | string[]
-      }
-}
-
 type Entrypoints = {
-  client: WebpackEntrypoints
-  server: WebpackEntrypoints
+  client: webpack5.EntryObject
+  server: webpack5.EntryObject
 }
 
 export function createEntrypoints(
@@ -85,8 +76,8 @@ export function createEntrypoints(
   config: NextConfigComplete,
   loadedEnvFiles: LoadedEnvFiles
 ): Entrypoints {
-  const client: WebpackEntrypoints = {}
-  const server: WebpackEntrypoints = {}
+  const client: webpack5.EntryObject = {}
+  const server: webpack5.EntryObject = {}
 
   const hasRuntimeConfig =
     Object.keys(config.publicRuntimeConfig).length > 0 ||

packages/next/build/webpack-config.ts

@@ -5,6 +5,7 @@ import { readFileSync } from 'fs'
 import { codeFrameColumns } from 'next/dist/compiled/babel/code-frame'
 import semver from 'next/dist/compiled/semver'
 import { isWebpack5, webpack } from 'next/dist/compiled/webpack/webpack'
+import type webpack5 from 'webpack5'
 import path, { join as pathJoin, relative as relativePath } from 'path'
 import {
   DOT_NEXT_ALIAS,
@@ -28,7 +29,6 @@ import {
 } from '../shared/lib/constants'
 import { execOnce } from '../shared/lib/utils'
 import { NextConfigComplete } from '../server/config-shared'
-import { WebpackEntrypoints } from './entries'
 import * as Log from './output/log'
 import { build as buildConfiguration } from './webpack/config'
 import { __overrideCssConfiguration } from './webpack/config/blocks/css/overrideCssConfiguration'
@@ -217,7 +217,7 @@ export default async function getBaseWebpackConfig(
     pagesDir: string
     target?: string
     reactProductionProfiling?: boolean
-    entrypoints: WebpackEntrypoints
+    entrypoints: webpack5.EntryObject
     rewrites: CustomRoutes['rewrites']
     isDevFallback?: boolean
     runWebpackSpan: Span
@@ -1337,26 +1337,26 @@ export default async function getBaseWebpackConfig(
     // futureEmitAssets is on by default in webpack 5
     delete webpackConfig.output?.futureEmitAssets
 
+    // webpack 5 no longer polyfills Node.js modules:
+    if (webpackConfig.node) delete webpackConfig.node.setImmediate
+
+    const webpack5Config = webpackConfig as webpack5.Configuration
+
     if (isServer && dev) {
       // Enable building of client compilation before server compilation in development
-      // @ts-ignore dependencies exists
-      webpackConfig.dependencies = ['client']
+      webpack5Config.dependencies = ['client']
     }
-    // webpack 5 no longer polyfills Node.js modules:
-    if (webpackConfig.node) delete webpackConfig.node.setImmediate
 
     // Due to bundling of webpack the default values can't be correctly detected
     // This restores the webpack defaults
-    // @ts-ignore webpack 5
-    webpackConfig.snapshot = {}
+    webpack5Config.snapshot = {}
     if (process.versions.pnp === '3') {
       const match =
         /^(.+?)[\\/]cache[\\/]jest-worker-npm-[^\\/]+\.zip[\\/]node_modules[\\/]/.exec(
           require.resolve('jest-worker')
         )
       if (match) {
-        // @ts-ignore webpack 5
-        webpackConfig.snapshot.managedPaths = [
+        webpack5Config.snapshot.managedPaths = [
           path.resolve(match[1], 'unplugged'),
         ]
       }
@@ -1365,8 +1365,7 @@ export default async function getBaseWebpackConfig(
         require.resolve('jest-worker')
       )
       if (match) {
-        // @ts-ignore webpack 5
-        webpackConfig.snapshot.managedPaths = [match[1]]
+        webpack5Config.snapshot.managedPaths = [match[1]]
       }
     }
     if (process.versions.pnp === '1') {
@@ -1375,26 +1374,24 @@ export default async function getBaseWebpackConfig(
           require.resolve('jest-worker')
         )
       if (match) {
-        // @ts-ignore webpack 5
-        webpackConfig.snapshot.immutablePaths = [match[1]]
+        webpack5Config.snapshot.immutablePaths = [match[1]]
       }
     } else if (process.versions.pnp === '3') {
       const match =
         /^(.+?)[\\/]jest-worker-npm-[^\\/]+\.zip[\\/]node_modules[\\/]/.exec(
           require.resolve('jest-worker')
         )
       if (match) {
-        // @ts-ignore webpack 5
-        webpackConfig.snapshot.immutablePaths = [match[1]]
+        webpack5Config.snapshot.immutablePaths = [match[1]]
       }
     }
 
     if (dev) {
-      if (!webpackConfig.optimization) {
-        webpackConfig.optimization = {}
+      if (!webpack5Config.optimization) {
+        webpack5Config.optimization = {}
       }
-      webpackConfig.optimization.providedExports = false
-      webpackConfig.optimization.usedExports = false
+      webpack5Config.optimization.providedExports = false
+      webpack5Config.optimization.usedExports = false
     }
 
     const configVars = JSON.stringify({
@@ -1439,7 +1436,7 @@ export default async function getBaseWebpackConfig(
       }
     }
 
-    webpackConfig.cache = cache
+    webpack5Config.cache = cache
 
     if (process.env.NEXT_WEBPACK_LOGGING) {
       const logInfra =
@@ -1451,8 +1448,7 @@ export default async function getBaseWebpackConfig(
       const logDefault = !logInfra && !logProfileClient && !logProfileServer
 
       if (logDefault || logInfra) {
-        // @ts-ignore TODO: remove ignore when webpack 5 is stable
-        webpackConfig.infrastructureLogging = {
+        webpack5Config.infrastructureLogging = {
           level: 'verbose',
           debug: /FileSystemInfo/,
         }
@@ -1463,12 +1459,11 @@ export default async function getBaseWebpackConfig(
         (logProfileClient && !isServer) ||
         (logProfileServer && isServer)
       ) {
-        webpackConfig.plugins!.push((compiler: webpack.Compiler) => {
+        webpack5Config.plugins!.push((compiler: webpack5.Compiler) => {
           compiler.hooks.done.tap('next-webpack-logging', (stats) => {
             console.log(
               stats.toString({
                 colors: true,
-                // @ts-ignore TODO: remove ignore when webpack 5 is stable
                 logging: logDefault ? 'log' : 'verbose',
               })
             )
@@ -1477,13 +1472,14 @@ export default async function getBaseWebpackConfig(
       }
 
       if ((logProfileClient && !isServer) || (logProfileServer && isServer)) {
-        webpackConfig.plugins!.push(
-          new webpack.ProgressPlugin({
-            // @ts-ignore TODO: remove ignore when webpack 5 is stable
+        const ProgressPlugin =
+          webpack.ProgressPlugin as unknown as typeof webpack5.ProgressPlugin
+        webpack5Config.plugins!.push(
+          new ProgressPlugin({
             profile: true,
           })
         )
-        webpackConfig.profile = true
+        webpack5Config.profile = true
       }
     }
   }
@@ -1844,7 +1840,7 @@ export default async function getBaseWebpackConfig(
   const originalEntry: any = webpackConfig.entry
   if (typeof originalEntry !== 'undefined') {
     const updatedEntry = async () => {
-      const entry: WebpackEntrypoints =
+      const entry: webpack5.EntryObject =
         typeof originalEntry === 'function'
           ? await originalEntry()
           : originalEntry

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

@@ -4,7 +4,10 @@ import { Transform, TransformCallback } from 'stream'
 // @ts-ignore no types package
 import bfj from 'next/dist/compiled/bfj'
 import { spans } from './profiling-plugin'
-import { webpack } from 'next/dist/compiled/webpack/webpack'
+import { isWebpack5 } from 'next/dist/compiled/webpack/webpack'
+import type webpack from 'webpack'
+import type webpack4 from 'webpack4'
+import type webpack5 from 'webpack5'
 
 const STATS_VERSION = 0
 
@@ -120,21 +123,29 @@ export default class BuildStatsPlugin {
           const writeStatsSpan = compilerSpan!.traceChild('NextJsBuildStats')
           await writeStatsSpan.traceAsyncFn(() => {
             return new Promise((resolve, reject) => {
+              const baseOptions = {
+                all: false,
+                cached: true,
+                reasons: true,
+                entrypoints: true,
+                chunks: true,
+                errors: false,
+                warnings: false,
+                maxModules: Infinity,
+                chunkModules: true,
+                modules: true,
+              }
               const statsJson = reduceSize(
-                stats.toJson({
-                  all: false,
-                  cached: true,
-                  reasons: true,
-                  entrypoints: true,
-                  chunks: true,
-                  errors: false,
-                  warnings: false,
-                  maxModules: Infinity,
-                  chunkModules: true,
-                  modules: true,
-                  // @ts-ignore this option exists
-                  ids: true,
-                })
+                isWebpack5
+                  ? (stats as webpack5.Stats).toJson({
+                      ...baseOptions,
+                      modulesSpace: Infinity,
+                      ids: true,
+                    })
+                  : (stats as webpack4.Stats).toJson({
+                      ...baseOptions,
+                      maxModules: Infinity,
+                    })
               )
               const fileStream = fs.createWriteStream(
                 path.join(this.distDir, 'next-stats.json'),

packages/next/build/webpack/require-hook.ts

@@ -33,6 +33,30 @@ const hookPropertyMap = new Map(
       'webpack/lib/node/NodeTargetPlugin.js',
       'next/dist/compiled/webpack/NodeTargetPlugin',
     ],
+    [
+      'webpack/lib/node/NodeTemplatePlugin',
+      'next/dist/compiled/webpack/NodeTemplatePlugin',
+    ],
+    [
+      'webpack/lib/node/NodeTemplatePlugin.js',
+      'next/dist/compiled/webpack/NodeTemplatePlugin',
+    ],
+    [
+      'webpack/lib/LibraryTemplatePlugin',
+      'next/dist/compiled/webpack/LibraryTemplatePlugin',
+    ],
+    [
+      'webpack/lib/LibraryTemplatePlugin.js',
+      'next/dist/compiled/webpack/LibraryTemplatePlugin',
+    ],
+    [
+      'webpack/lib/SingleEntryPlugin',
+      'next/dist/compiled/webpack/SingleEntryPlugin',
+    ],
+    [
+      'webpack/lib/SingleEntryPlugin.js',
+      'next/dist/compiled/webpack/SingleEntryPlugin',
+    ],
     [
       'webpack/lib/ModuleFilenameHelpers',
       'next/dist/compiled/webpack/ModuleFilenameHelpers',

packages/next/bundles/webpack/bundle4.js

@@ -2,23 +2,24 @@
 
 module.exports = function () {
   return {
-    BasicEvaluatedExpression: require('webpack/lib/BasicEvaluatedExpression'),
-    NodeEnvironmentPlugin: require('webpack/lib/node/NodeEnvironmentPlugin'),
-    NodeTargetPlugin: require('webpack/lib/node/NodeTargetPlugin'),
-    ModuleFilenameHelpers: require('webpack/lib/ModuleFilenameHelpers'),
-    GraphHelpers: require('webpack/lib/GraphHelpers'),
-    Module: require('webpack/lib/Module'),
-    NormalModule: require('webpack/lib/NormalModule'),
-    Dependency: require('webpack/lib/Dependency'),
-    LibraryTemplatePlugin: require('webpack/lib/LibraryTemplatePlugin'),
-    SingleEntryPlugin: require('webpack/lib/SingleEntryPlugin'),
-    node: require('webpack').node,
-    util: require('webpack').util,
-    optimize: require('webpack').optimize,
+    BasicEvaluatedExpression: require('webpack4/lib/BasicEvaluatedExpression'),
+    NodeEnvironmentPlugin: require('webpack4/lib/node/NodeEnvironmentPlugin'),
+    NodeTargetPlugin: require('webpack4/lib/node/NodeTargetPlugin'),
+    NodeTemplatePlugin: require('webpack4/lib/node/NodeTemplatePlugin'),
+    ModuleFilenameHelpers: require('webpack4/lib/ModuleFilenameHelpers'),
+    GraphHelpers: require('webpack4/lib/GraphHelpers'),
+    Module: require('webpack4/lib/Module'),
+    NormalModule: require('webpack4/lib/NormalModule'),
+    Dependency: require('webpack4/lib/Dependency'),
+    LibraryTemplatePlugin: require('webpack4/lib/LibraryTemplatePlugin'),
+    SingleEntryPlugin: require('webpack4/lib/SingleEntryPlugin'),
+    node: require('webpack4').node,
+    util: require('webpack4').util,
+    optimize: require('webpack4').optimize,
     sources: require('webpack-sources'),
-    webpack: require('webpack'),
+    webpack: require('webpack4'),
     package: {
-      version: require('webpack/package.json').version,
+      version: require('webpack4/package.json').version,
     },
   }
 }

packages/next/bundles/webpack/bundle5.js

@@ -5,8 +5,11 @@ module.exports = function () {
     BasicEvaluatedExpression: require('webpack5/lib/javascript/BasicEvaluatedExpression'),
     ModuleFilenameHelpers: require('webpack5/lib/ModuleFilenameHelpers'),
     NodeTargetPlugin: require('webpack5/lib/node/NodeTargetPlugin'),
+    NodeTemplatePlugin: require('webpack5/lib/node/NodeTemplatePlugin'),
+    LibraryTemplatePlugin: require('webpack5/lib/LibraryTemplatePlugin'),
+    SingleEntryPlugin: require('webpack5/lib/SingleEntryPlugin'),
     StringXor: require('webpack5/lib/util/StringXor'),
-    NormalModule: require('webpack/lib/NormalModule'),
+    NormalModule: require('webpack5/lib/NormalModule'),
     sources: require('webpack5').sources,
     webpack: require('webpack5'),
   }

packages/next/bundles/webpack/packages/LibraryTemplatePlugin.js

@@ -0,0 +1 @@
+module.exports = require('./webpack.js').LibraryTemplatePlugin

packages/next/bundles/webpack/packages/NodeTemplatePlugin.js

@@ -0,0 +1 @@
+module.exports = require('./webpack.js').NodeTemplatePlugin

packages/next/bundles/webpack/packages/SingleEntryPlugin.js

@@ -0,0 +1 @@
+module.exports = require('./webpack.js').SingleEntryPlugin