feat(core): upgrade to webpack-dev-server@4 (#5420)

Co-authored-by: slorber <lorber.sebastien@gmail.com>

package.json

@@ -86,7 +86,7 @@
     "@types/semver": "^7.1.0",
     "@types/shelljs": "^0.8.6",
     "@types/wait-on": "^5.2.0",
-    "@types/webpack-dev-server": "^3.11.1",
+    "@types/webpack-dev-server": "^4.1.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "concurrently": "^6.2.1",

packages/docusaurus-mdx-loader/package.json

@@ -35,7 +35,7 @@
     "stringify-object": "^3.3.0",
     "unist-util-visit": "^2.0.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.40.0"
+    "webpack": "^5.60.0"
   },
   "devDependencies": {
     "@docusaurus/types": "2.0.0-beta.8",

packages/docusaurus-plugin-content-blog/package.json

@@ -35,7 +35,7 @@
     "remark-admonitions": "^1.2.1",
     "tslib": "^2.3.1",
     "utility-types": "^3.10.0",
-    "webpack": "^5.40.0"
+    "webpack": "^5.60.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

packages/docusaurus-plugin-content-docs/package.json

@@ -45,7 +45,7 @@
     "shelljs": "^0.8.4",
     "tslib": "^2.3.1",
     "utility-types": "^3.10.0",
-    "webpack": "^5.40.0"
+    "webpack": "^5.60.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

packages/docusaurus-plugin-content-pages/package.json

@@ -27,7 +27,7 @@
     "lodash": "^4.17.20",
     "remark-admonitions": "^1.2.1",
     "tslib": "^2.3.1",
-    "webpack": "^5.40.0"
+    "webpack": "^5.60.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

packages/docusaurus-plugin-ideal-image/package.json

@@ -29,7 +29,7 @@
     "react-waypoint": "^10.1.0",
     "sharp": "^0.29.1",
     "tslib": "^2.3.1",
-    "webpack": "^5.40.0"
+    "webpack": "^5.60.0"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

packages/docusaurus-plugin-pwa/package.json

@@ -24,7 +24,7 @@
     "clsx": "^1.1.1",
     "core-js": "^2.6.5",
     "terser-webpack-plugin": "^5.2.4",
-    "webpack": "^5.40.0",
+    "webpack": "^5.60.0",
     "webpack-merge": "^5.7.3",
     "workbox-build": "^6.1.1",
     "workbox-precaching": "^6.1.1",

packages/docusaurus-types/package.json

@@ -20,7 +20,7 @@
     "joi": "^17.4.2",
     "querystring": "0.2.0",
     "utility-types": "^3.10.0",
-    "webpack": "^5.40.0",
+    "webpack": "^5.60.0",
     "webpack-merge": "^5.8.0"
   }
 }

packages/docusaurus/package.json

@@ -80,7 +80,6 @@
     "detect-port": "^1.3.0",
     "escape-html": "^1.0.3",
     "eta": "^1.12.3",
-    "express": "^4.17.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "github-slugger": "^1.4.0",
@@ -98,7 +97,7 @@
     "postcss": "^8.3.7",
     "postcss-loader": "^6.1.1",
     "prompts": "^2.4.1",
-    "react-dev-utils": "^11.0.1",
+    "react-dev-utils": "12.0.0-next.47",
     "react-error-overlay": "^6.0.9",
     "react-helmet": "^6.1.0",
     "react-loadable": "^5.5.0",
@@ -119,9 +118,9 @@
     "update-notifier": "^5.1.0",
     "url-loader": "^4.1.1",
     "wait-on": "^6.0.0",
-    "webpack": "^5.40.0",
+    "webpack": "^5.60.0",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.4.0",
     "webpack-merge": "^5.8.0",
     "webpackbar": "^5.0.0-3"
   },

packages/docusaurus/src/commands/start.ts

@@ -8,19 +8,16 @@
 import {normalizeUrl, posixPath} from '@docusaurus/utils';
 import chalk = require('chalk');
 import chokidar from 'chokidar';
-import express from 'express';
+
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import path from 'path';
 import {debounce} from 'lodash';
 import openBrowser from 'react-dev-utils/openBrowser';
 import {prepareUrls} from 'react-dev-utils/WebpackDevServerUtils';
-import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware';
-// import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
-import evalSourceMapMiddleware from '../webpack/react-dev-utils-webpack5/evalSourceMapMiddleware';
+import evalSourceMapMiddleware from 'react-dev-utils/evalSourceMapMiddleware';
 import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import merge from 'webpack-merge';
-import HotModuleReplacementPlugin from 'webpack/lib/HotModuleReplacementPlugin';
 import {load} from '../server';
 import {StartCLIOptions} from '@docusaurus/types';
 import {STATIC_DIR_NAME} from '../constants';
@@ -126,6 +123,10 @@ export default async function start(
   );
 
   let config: webpack.Configuration = merge(createClientConfig(props), {
+    infrastructureLogging: {
+      // Reduce log verbosity, see https://github.com/facebook/docusaurus/pull/5420#issuecomment-906613105
+      level: 'warn',
+    },
     plugins: [
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin({
@@ -141,8 +142,6 @@ export default async function start(
         preBodyTags,
         postBodyTags,
       }),
-      // This is necessary to emit hot updates for webpack-dev-server.
-      new HotModuleReplacementPlugin(),
     ],
   });
 
@@ -167,50 +166,52 @@ export default async function start(
 
   // https://webpack.js.org/configuration/dev-server
   const devServerConfig: WebpackDevServer.Configuration = {
-    ...{
-      compress: true,
-      clientLogLevel: 'error',
-      hot: true,
-      hotOnly: cliOptions.hotOnly,
-      // Use 'ws' instead of 'sockjs-node' on server since we're using native
-      // websockets in `webpackHotDevClient`.
-      transportMode: 'ws',
-      // Prevent a WS client from getting injected as we're already including
-      // `webpackHotDevClient`.
-      injectClient: false,
-      quiet: true,
-      https: getHttpsConfig(),
-      headers: {
-        'access-control-allow-origin': '*',
+    compress: true,
+    hot: cliOptions.hotOnly ? 'only' : true,
+    client: {
+      progress: true,
+      overlay: {
+        warnings: false,
+        errors: true,
       },
+    },
+    https: getHttpsConfig(),
+    headers: {
+      'access-control-allow-origin': '*',
+    },
+    devMiddleware: {
       publicPath: baseUrl,
-      watchOptions: {
-        poll: cliOptions.poll,
+      // Reduce log verbosity, see https://github.com/facebook/docusaurus/pull/5420#issuecomment-906613105
+      stats: 'errors-warnings',
+    },
+    static: {
+      directory: path.resolve(siteDir, STATIC_DIR_NAME),
+      watch: {
+        usePolling: !!cliOptions.poll,
 
         // Useful options for our own monorepo using symlinks!
         // See https://github.com/webpack/webpack/issues/11612#issuecomment-879259806
         followSymlinks: true,
         ignored: /node_modules\/(?!@docusaurus)/,
       },
-      historyApiFallback: {
-        rewrites: [{from: /\/*/, to: baseUrl}],
-      },
-      disableHostCheck: true,
-      // Disable overlay on browser since we use CRA's overlay error reporting.
-      overlay: false,
-      host,
-      before: (app, server) => {
-        app.use(
-          baseUrl,
-          express.static(path.resolve(siteDir, STATIC_DIR_NAME)),
-        );
-        // This lets us fetch source contents from webpack for the error overlay.
-        app.use(evalSourceMapMiddleware(server));
-        // This lets us open files from the runtime error overlay.
-        app.use(errorOverlayMiddleware());
-      },
+    },
+    historyApiFallback: {
+      rewrites: [{from: /\/*/, to: baseUrl}],
+    },
+    allowedHosts: 'all',
+    host,
+    port,
+    onBeforeSetupMiddleware: (devServer) => {
+      // This lets us fetch source contents from webpack for the error overlay.
+      devServer.app.use(
+        evalSourceMapMiddleware(
+          // @ts-expect-error: bad types
+          devServer,
+        ),
+      );
     },
   };
+
   const compiler = webpack(config);
   if (process.env.E2E_TEST) {
     compiler.hooks.done.tap('done', (stats) => {
@@ -223,15 +224,13 @@ export default async function start(
     });
   }
 
-  const devServer = new WebpackDevServer(compiler, devServerConfig);
-  devServer.listen(port, host, (err) => {
-    if (err) {
-      console.log(err);
-    }
+  const devServer = new WebpackDevServer(devServerConfig, compiler);
+  devServer.startCallback(() => {
     if (cliOptions.open) {
       openBrowser(openUrl);
     }
   });
+
   ['SIGINT', 'SIGTERM'].forEach((sig) => {
     process.on(sig as NodeJS.Signals, () => {
       devServer.close();

packages/docusaurus/src/webpack/client.ts

@@ -19,21 +19,12 @@ export default function createClientConfig(
   props: Props,
   minify: boolean = true,
 ): Configuration {
-  const isProd = process.env.NODE_ENV === 'production';
   const isBuilding = process.argv[2] === 'build';
   const config = createBaseConfig(props, false, minify);
 
   const clientConfig = merge(config, {
     // target: 'browserslist', //  useless, disabled on purpose (errors on existing sites with no browserslist cfg)
-    entry: [
-      // Instead of the default WebpackDevServer client, we use a custom one
-      // like CRA to bring better experience.
-      // note: the one in ./dev is modified to work with Docusaurus
-      // !isProd && require.resolve('react-dev-utils/hotDevServer.js'),
-      !isProd &&
-        require.resolve('./react-dev-utils-webpack5/webpackHotDevClient.js'),
-      path.resolve(__dirname, '../client/clientEntry.js'),
-    ].filter(Boolean) as string[],
+    entry: path.resolve(__dirname, '../client/clientEntry.js'),
     optimization: {
       // Keep the runtime chunk separated to enable long term caching
       // https://twitter.com/wSokra/status/969679223278505985

packages/docusaurus/src/webpack/plugins/LogPlugin.ts

@@ -6,8 +6,7 @@
  */
 import WebpackBar from 'webpackbar';
 import {Compiler} from 'webpack';
-// import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
-import formatWebpackMessages from '../react-dev-utils-webpack5/formatWebpackMessages';
+import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
 
 function showError(arr: string[]) {
   console.log(`\n\n${arr.join('\n')}`);