webpack inlining

packages/next/build/compiler.ts

@@ -1,4 +1,6 @@
-import webpack, { Stats, Configuration } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Stats, Configuration } from 'webpack'
+import webpack from 'next/dist/compiled/webpack/webpack'
 
 export type CompilerResult = {
   errors: string[]

packages/next/build/index.ts

@@ -402,6 +402,7 @@ export default async function build(
         pagesDir,
         entrypoints: entrypoints.client,
         rewrites,
+        webpack5: false,
       }),
       getBaseWebpackConfig(dir, {
         tracer: chromeProfiler,
@@ -413,6 +414,7 @@ export default async function build(
         pagesDir,
         entrypoints: entrypoints.server,
         rewrites,
+        webpack5: false,
       }),
     ])
 

packages/next/build/webpack-config.ts

@@ -7,8 +7,12 @@ import semver from 'next/dist/compiled/semver'
 // @ts-ignore No typings yet
 import TerserPlugin from './webpack/plugins/terser-webpack-plugin/src/index.js'
 import path from 'path'
-import webpack from 'webpack'
-import { Configuration } from 'webpack'
+import webpack, {
+  isWebpack5,
+  init as initWebpack,
+} from 'next/dist/compiled/webpack/webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Configuration } from 'webpack'
 import {
   DOT_NEXT_ALIAS,
   NEXT_PROJECT_ROOT,
@@ -62,15 +66,6 @@ import { NextConfig } from '../next-server/server/config'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
-const isWebpack5 = parseInt(webpack.version!) === 5
-
-if (isWebpack5 && semver.lt(webpack.version!, '5.11.1')) {
-  Log.error(
-    `webpack 5 version must be greater than v5.11.1 to work properly with Next.js, please upgrade to continue!\nSee more info here: https://err.sh/next.js/invalid-webpack-5-version`
-  )
-  process.exit(1)
-}
-
 const devtoolRevertWarning = execOnce((devtool: Configuration['devtool']) => {
   console.warn(
     chalk.yellow.bold('Warning: ') +
@@ -198,6 +193,7 @@ export default async function getBaseWebpackConfig(
     reactProductionProfiling = false,
     entrypoints,
     rewrites,
+    webpack5 = false,
   }: {
     buildId: string
     config: NextConfig
@@ -209,8 +205,11 @@ export default async function getBaseWebpackConfig(
     reactProductionProfiling?: boolean
     entrypoints: WebpackEntrypoints
     rewrites: Rewrite[]
+    webpack5: boolean
   }
 ): Promise<webpack.Configuration> {
+  initWebpack(webpack5)
+
   const productionBrowserSourceMaps =
     config.productionBrowserSourceMaps && !isServer
   let plugins: PluginMetaData[] = []

packages/next/build/webpack/config/blocks/base.ts

@@ -1,6 +1,7 @@
 import isWslBoolean from 'next/dist/compiled/is-wsl'
 import curry from 'next/dist/compiled/lodash.curry'
-import { Configuration } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Configuration } from 'webpack'
 import { ConfigurationContext } from '../utils'
 
 const isWindows = process.platform === 'win32' || isWslBoolean

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

@@ -1,6 +1,6 @@
 import curry from 'next/dist/compiled/lodash.curry'
 import path from 'path'
-import webpack, { Configuration } from 'webpack'
+import type webpack from 'next/dist/compiled/webpack/webpack'
 import MiniCssExtractPlugin from '../../../plugins/mini-css-extract-plugin'
 import { loader, plugin } from '../../helpers'
 import { ConfigurationContext, ConfigurationFn, pipe } from '../../utils'
@@ -26,7 +26,7 @@ const regexSassModules = /\.module\.(scss|sass)$/
 
 export const css = curry(async function css(
   ctx: ConfigurationContext,
-  config: Configuration
+  config: webpack.Configuration
 ) {
   const {
     prependData: sassPrependData,

packages/next/build/webpack/config/blocks/css/loaders/client.ts

@@ -1,4 +1,5 @@
-import webpack from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type webpack from 'webpack'
 import MiniCssExtractPlugin from '../../../../plugins/mini-css-extract-plugin'
 
 export function getClientStyleLoader({

packages/next/build/webpack/config/blocks/css/loaders/getCssModuleLocalIdent.ts

@@ -1,6 +1,7 @@
 import loaderUtils from 'loader-utils'
 import path from 'path'
-import webpack from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type webpack from 'webpack'
 
 const regexLikeIndexModule = /(?<!pages[\\/])index\.module\.(scss|sass|css)$/
 

packages/next/build/webpack/config/blocks/css/loaders/global.ts

@@ -1,5 +1,6 @@
 import { AcceptedPlugin } from 'postcss'
-import webpack from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type webpack from 'webpack'
 import { ConfigurationContext } from '../../../utils'
 import { getClientStyleLoader } from './client'
 import { cssFileResolve } from './file-resolve'

packages/next/build/webpack/config/blocks/css/loaders/modules.ts

@@ -1,5 +1,6 @@
 import { AcceptedPlugin } from 'postcss'
-import webpack from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type webpack from 'webpack'
 import { ConfigurationContext } from '../../../utils'
 import { getClientStyleLoader } from './client'
 import { cssFileResolve } from './file-resolve'

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

@@ -1,4 +1,5 @@
-import { Configuration, RuleSetRule } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Configuration, RuleSetRule } from 'webpack'
 import { getPostCssPlugins } from './plugins'
 
 export async function __overrideCssConfiguration(

packages/next/build/webpack/config/helpers.ts

@@ -1,5 +1,6 @@
 import curry from 'next/dist/compiled/lodash.curry'
-import { Configuration, Plugin, RuleSetRule } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Configuration, Plugin, RuleSetRule } from 'webpack'
 
 export const loader = curry(function loader(
   rule: RuleSetRule,

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

@@ -1,4 +1,4 @@
-import webpack from 'webpack'
+import webpack from 'next/dist/compiled/webpack/webpack'
 import { base } from './blocks/base'
 import { css } from './blocks/css'
 import { ConfigurationContext, pipe } from './utils'

packages/next/build/webpack/config/utils.ts

@@ -1,4 +1,5 @@
-import webpack from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type webpack from 'webpack'
 
 export type ConfigurationContext = {
   rootDirectory: string

packages/next/build/webpack/loaders/error-loader.ts

@@ -1,7 +1,8 @@
 import chalk from 'chalk'
 import loaderUtils from 'loader-utils'
 import path from 'path'
-import { loader } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { loader } from 'webpack'
 
 const ErrorLoader: loader.Loader = function () {
   const options = loaderUtils.getOptions(this) || {}

packages/next/build/webpack/loaders/next-client-pages-loader.ts

@@ -1,4 +1,5 @@
-import { loader } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { loader } from 'webpack'
 import loaderUtils from 'loader-utils'
 import { tracer, traceFn } from '../../tracer'
 

packages/next/build/webpack/loaders/next-data-loader.ts

@@ -1,4 +1,5 @@
-import { loader } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { loader } from 'webpack'
 import hash from 'next/dist/compiled/string-hash'
 import { basename } from 'path'
 const nextDataLoader: loader.Loader = function () {

packages/next/build/webpack/loaders/next-plugin-loader.ts

@@ -1,4 +1,5 @@
-import { loader } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { loader } from 'webpack'
 import { parse } from 'querystring'
 import { PluginMetaData, getPluginId } from '../../plugins/collect-plugins'
 

packages/next/build/webpack/loaders/next-serverless-loader/index.ts

@@ -2,7 +2,8 @@ import devalue from 'next/dist/compiled/devalue'
 import escapeRegexp from 'next/dist/compiled/escape-string-regexp'
 import { join } from 'path'
 import { parse } from 'querystring'
-import { loader } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { loader } from 'webpack'
 import { API_ROUTE } from '../../../../lib/constants'
 import { isDynamicRoute } from '../../../../next-server/lib/router/utils'
 import { __ApiPreviewProps } from '../../../../next-server/server/api-utils'

packages/next/build/webpack/loaders/noop-loader.ts

@@ -1,4 +1,5 @@
-import { loader } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { loader } from 'webpack'
 
 const NoopLoader: loader.Loader = (source) => source
 export default NoopLoader

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

@@ -1,5 +1,10 @@
 import devalue from 'next/dist/compiled/devalue'
-import webpack, { Compiler, compilation as CompilationType } from 'webpack'
+import webpack, {
+  isWebpack5,
+  onWebpackInit,
+} from 'next/dist/compiled/webpack/webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Compiler, compilation as CompilationType } from 'webpack'
 import sources from 'webpack-sources'
 import {
   BUILD_MANIFEST,
@@ -17,9 +22,10 @@ import { getSortedRoutes } from '../../../next-server/lib/router/utils'
 import { tracer, traceFn } from '../../tracer'
 
 // @ts-ignore: TODO: remove ignore when webpack 5 is stable
-const { RawSource } = webpack.sources || sources
-
-const isWebpack5 = parseInt(webpack.version!) === 5
+let RawSource: typeof sources.RawSource
+onWebpackInit(function () {
+  ;({ RawSource } = (webpack as any).sources || sources)
+})
 
 type DeepMutable<T> = { -readonly [P in keyof T]: DeepMutable<T[P]> }
 

packages/next/build/webpack/plugins/chunk-names-plugin.ts

@@ -1,4 +1,5 @@
-import { Compiler } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { Compiler } from 'webpack'
 // This plugin mirrors webpack 3 `filename` and `chunkfilename` behavior
 // This fixes https://github.com/webpack/webpack/issues/6598
 // This plugin is based on https://github.com/researchgate/webpack/commit/2f28947fa0c63ccbb18f39c0098bd791a2c37090

packages/next/build/webpack/plugins/css-minimizer-plugin.ts

@@ -1,12 +1,18 @@
 import cssnanoSimple from 'cssnano-simple'
 import postcssScss from 'next/dist/compiled/postcss-scss'
 import postcss, { Parser } from 'postcss'
-import webpack from 'webpack'
+import webpack, {
+  isWebpack5,
+  onWebpackInit,
+} from 'next/dist/compiled/webpack/webpack'
 import sources from 'webpack-sources'
 import { tracer, traceAsyncFn } from '../../tracer'
 
 // @ts-ignore: TODO: remove ignore when webpack 5 is stable
-const { RawSource, SourceMapSource } = webpack.sources || sources
+let RawSource: typeof sources.RawSource, SourceMapSource: typeof sources.SourceMapSource
+onWebpackInit(function () {
+  ;({ RawSource, SourceMapSource } = (webpack as any).sources || sources)
+})
 
 // https://github.com/NMFR/optimize-css-assets-webpack-plugin/blob/0a410a9bf28c7b0e81a3470a13748e68ca2f50aa/src/index.js#L20
 const CSS_REGEX = /\.css(\?.*)?$/i
@@ -17,8 +23,6 @@ type CssMinimizerPluginOptions = {
   }
 }
 
-const isWebpack5 = parseInt(webpack.version!) === 5
-
 export class CssMinimizerPlugin {
   __next_css_remove = true
 

packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts

@@ -1,4 +1,9 @@
-import webpack, { compilation as CompilationType, Compiler } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { compilation as CompilationType, Compiler } from 'webpack'
+import webpack, {
+  BasicEvaluatedExpression,
+  isWebpack5,
+} from 'next/dist/compiled/webpack/webpack'
 import { namedTypes } from 'ast-types'
 import sources from 'webpack-sources'
 import {
@@ -15,15 +20,6 @@ import {
 // @ts-ignore: TODO: remove ignore when webpack 5 is stable
 const { RawSource } = webpack.sources || sources
 
-const isWebpack5 = parseInt(webpack.version!) === 5
-
-let BasicEvaluatedExpression: any
-if (isWebpack5) {
-  BasicEvaluatedExpression = require('webpack/lib/javascript/BasicEvaluatedExpression')
-} else {
-  BasicEvaluatedExpression = require('webpack/lib/BasicEvaluatedExpression')
-}
-
 async function minifyCss(css: string): Promise<string> {
   return new Promise((resolve) =>
     postcss([

packages/next/build/webpack/plugins/jsconfig-paths-plugin.ts

@@ -4,7 +4,8 @@
  * https://github.com/microsoft/TypeScript/blob/214df64e287804577afa1fea0184c18c40f7d1ca/LICENSE.txt
  */
 import path from 'path'
-import { ResolvePlugin } from 'webpack'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import type { ResolvePlugin } from 'webpack'
 import { debug } from 'next/dist/compiled/debug'
 
 const log = debug('next:jsconfig-paths-plugin')