[BREAKING/v3] Upgrade to webpack 5

.changeset/silver-dolphins-remember.md

@@ -0,0 +1,5 @@
+---
+"modular-scripts": major
+---
+
+Upgrade webpack implementation to use webpack 5 + associated loader / plugin dependencies.

package.json

@@ -99,6 +99,7 @@
   },
   "jest": {
     "coveragePathIgnorePatterns": [
+      "/__fixtures__/",
       "/node_modules/",
       "/modular-site/",
       "/modular-views.macro/"

packages/modular-scripts/package.json

@@ -41,7 +41,8 @@
     "change-case": "4.1.2",
     "commander": "9.2.0",
     "cross-spawn": "7.0.3",
-    "css-loader": "4.3.0",
+    "css-loader": "6.6.0",
+    "css-minimizer-webpack-plugin": "3.4.1",
     "dedent": "0.7.0",
     "detect-port-alt": "1.1.6",
     "dotenv": "16.0.0",
@@ -56,12 +57,12 @@
     "file-loader": "6.2.0",
     "filesize": "8.0.3",
     "find-up": "5.0.0",
-    "fork-ts-checker-webpack-plugin": "4.1.6",
+    "fork-ts-checker-webpack-plugin": "6.5.0",
     "fs-extra": "10.1.0",
     "global-modules": "2.0.0",
     "globby": "11.0.4",
     "gzip-size": "6.0.0",
-    "html-webpack-plugin": "4.5.2",
+    "html-webpack-plugin": "5.5.0",
     "html-minifier-terser": "6.1.0",
     "is-ci": "2.0.0",
     "is-root": "2.1.0",
@@ -73,19 +74,18 @@
     "jest-transform-stub": "2.0.0",
     "jest-watch-typeahead": "0.6.5",
     "js-yaml": "^4.1.0",
-    "loader-utils": "2.0.0",
+    "loader-utils": "3.2.0",
     "micromatch": "4.0.5",
     "mime": "^3.0.0",
-    "mini-css-extract-plugin": "0.11.3",
+    "mini-css-extract-plugin": "2.5.3",
     "npm-packlist": "5.0.0",
     "open": "8.3.0",
-    "optimize-css-assets-webpack-plugin": "6.0.1",
     "parse5": "6.0.1",
     "pkg-up": "3.1.0",
-    "pnp-webpack-plugin": "1.6.4",
+    "pnp-webpack-plugin": "1.7.0",
     "postcss": "8.4.12",
     "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-loader": "4.2.0",
+    "postcss-loader": "6.2.1",
     "postcss-normalize": "8.0.1",
     "postcss-preset-env": "7.4.3",
     "postcss-safe-parser": "5.0.2",
@@ -95,27 +95,27 @@
     "react-refresh": "0.8.3",
     "recursive-readdir": "2.2.2",
     "resolve": "1.21.0",
-    "resolve-url-loader": "5.0.0-beta.1",
+    "resolve-url-loader": "5.0.0",
     "rimraf": "3.0.2",
     "rollup": "2.70.2",
     "rollup-plugin-esbuild": "^4.9.1",
     "rollup-plugin-postcss": "4.0.2",
-    "sass-loader": "10.0.5",
+    "sass-loader": "12.6.0",
     "semver": "7.3.7",
     "semver-regex": "3.1.3",
     "shell-quote": "1.7.3",
     "source-map-support": "0.5.21",
     "strip-ansi": "6.0.0",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "4.2.3",
+    "style-loader": "3.3.1",
+    "terser-webpack-plugin": "5.3.1",
     "tmp": "^0.2.1",
     "ts-jest": "26.5.6",
     "ts-morph": "^14.0.0",
     "update-notifier": "5.1.0",
     "url-loader": "4.1.1",
-    "webpack": "4.46.0",
+    "webpack": "5.69.1",
     "webpack-dev-server": "4.8.1",
-    "webpack-manifest-plugin": "2.2.0",
+    "webpack-manifest-plugin": "4.1.1",
     "ws": "8.5.0"
   },
   "peerDependencies": {

packages/modular-scripts/react-dev-utils/WebpackDevServerUtils.js

@@ -13,7 +13,6 @@ const forkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { clearConsole } = require('./logger');
 const formatWebpackMessages = require('./formatWebpackMessages');
 const getProcessForPort = require('./getProcessForPort');
-const typescriptFormatter = require('./typescriptFormatter');
 const console = require('./logger');
 
 const isInteractive = process.stdout.isTTY;
@@ -94,15 +93,7 @@ function printInstructions(appName, urls) {
   console.log();
 }
 
-function createCompiler({
-  appName,
-  config,
-  devSocket,
-  urls,
-  useTypeScript,
-  tscCompileOnError,
-  webpack,
-}) {
+function createCompiler({ appName, config, urls, useTypeScript, webpack }) {
   // "Compiler" is a low-level interface to webpack.
   // It lets us listen to some events and provide our own custom messages.
   let compiler;
@@ -129,28 +120,16 @@ function createCompiler({
 
   let isFirstCompile = true;
   let tsMessagesPromise;
-  let tsMessagesResolver;
 
   if (useTypeScript) {
-    compiler.hooks.beforeCompile.tap('beforeCompile', () => {
-      tsMessagesPromise = new Promise((resolve) => {
-        tsMessagesResolver = (msgs) => resolve(msgs);
-      });
-    });
-
     forkTsCheckerWebpackPlugin
       .getCompilerHooks(compiler)
-      .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
-        const allMsgs = [...diagnostics, ...lints];
-        const format = (message) =>
-          `${message.file}\n${typescriptFormatter(message, true)}`;
-
-        tsMessagesResolver({
-          errors: allMsgs.filter((msg) => msg.severity === 'error').map(format),
-          warnings: allMsgs
-            .filter((msg) => msg.severity === 'warning')
-            .map(format),
-        });
+      .waiting.tap('awaitingTypeScriptCheck', () => {
+        console.log(
+          chalk.yellow(
+            'Files successfully emitted, waiting for typecheck results...',
+          ),
+        );
       });
   }
 
@@ -172,48 +151,6 @@ function createCompiler({
       errors: true,
     });
 
-    if (useTypeScript && statsData.errors.length === 0) {
-      const delayedMsg = setTimeout(() => {
-        console.log(
-          chalk.yellow(
-            'Files successfully emitted, waiting for typecheck results...',
-          ),
-        );
-      }, 100);
-
-      const messages = await tsMessagesPromise;
-      clearTimeout(delayedMsg);
-      if (tscCompileOnError) {
-        statsData.warnings.push(...messages.errors);
-      } else {
-        statsData.errors.push(...messages.errors);
-      }
-      statsData.warnings.push(...messages.warnings);
-
-      // Push errors and warnings into compilation result
-      // to show them after page refresh triggered by user.
-      if (tscCompileOnError) {
-        stats.compilation.warnings.push(...messages.errors);
-      } else {
-        stats.compilation.errors.push(...messages.errors);
-      }
-      stats.compilation.warnings.push(...messages.warnings);
-
-      if (messages.errors.length > 0) {
-        if (tscCompileOnError) {
-          devSocket.warnings(messages.errors);
-        } else {
-          devSocket.errors(messages.errors);
-        }
-      } else if (messages.warnings.length > 0) {
-        devSocket.warnings(messages.warnings);
-      }
-
-      if (isInteractive) {
-        clearConsole();
-      }
-    }
-
     const messages = formatWebpackMessages(statsData);
     const isSuccessful = !messages.errors.length && !messages.warnings.length;
     if (isSuccessful) {
@@ -371,7 +308,7 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
   // If proxy is specified, let it handle any request except for
   // files in the public folder and requests to the WebpackDevServer socket endpoint.
   // https://github.com/facebook/create-react-app/issues/6720
-  const sockPath = process.env.WDS_SOCKET_PATH || '/sockjs-node';
+  const sockPath = process.env.WDS_SOCKET_PATH || '/ws';
   const isDefaultSockHost = !process.env.WDS_SOCKET_HOST;
   function mayProxy(pathname) {
     const maybePublicPath = path.resolve(

packages/modular-scripts/react-dev-utils/evalSourceMapMiddleware.js

@@ -8,7 +8,9 @@ function base64SourceMap(source) {
 }
 
 function getSourceById(server, id) {
-  const module = server._stats.compilation.modules.find((m) => m.id === id);
+  const module = Array.from(server._stats.compilation.modules).find(
+    (m) => server._stats.compilation.chunkGraph.getModuleId(m) === id,
+  );
   return module.originalSource();
 }
 

packages/modular-scripts/react-dev-utils/formatWebpackMessages.js

@@ -8,7 +8,13 @@ function isLikelyASyntaxError(message) {
 
 // Cleans up webpack error messages.
 function formatMessage(message) {
-  let lines = message.split('\n');
+  let lines = [];
+
+  if (typeof message === 'string' || message instanceof String) {
+    lines = message.split('\n');
+  } else if ('message' in message) {
+    lines = message['message'].split('\n');
+  }
 
   // Strip webpack-added headers off errors/warnings
   // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js

packages/modular-scripts/react-dev-utils/webpackHotDevClient.js

@@ -56,7 +56,7 @@ var connection = new WebSocket(
     hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
     port: process.env.WDS_SOCKET_PORT || window.location.port,
     // Hardcoded in WebpackDevServer
-    pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
+    pathname: process.env.WDS_SOCKET_PATH || '/ws',
     slashes: true,
   }),
 );