Update from webpack4 to webpack5 (#7507)

webpack.config.js

@@ -3,7 +3,7 @@
 const webpack = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const WebpackBuildNotifierPlugin = require("webpack-build-notifier");
-const ManifestPlugin = require("webpack-manifest-plugin");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const LessPluginAutoPrefix = require("less-plugin-autoprefix");
@@ -76,8 +76,6 @@ const config = {
     publicPath: staticPath
   },
   node: {
-    fs: "empty",
-    path: "empty"
   },
   resolve: {
     symlinks: false,
@@ -85,6 +83,14 @@ const config = {
     alias: {
       "@": appPath,
       extensions: extensionPath
+    },
+    fallback: {
+      fs: false,
+      url: require.resolve("url/"),
+      stream: require.resolve("stream-browserify"),
+      assert: require.resolve("assert/"),
+      util: require.resolve("util/"),
+      process: require.resolve("process/browser"),
     }
   },
   plugins: [
@@ -109,7 +115,7 @@ const config = {
       new MiniCssExtractPlugin({
         filename: "[name].[chunkhash].css"
       }),
-    new ManifestPlugin({
+    new WebpackManifestPlugin({
       fileName: "asset-manifest.json",
       publicPath: ""
     }),
@@ -122,7 +128,13 @@ const config = {
         { from: "client/app/assets/fonts", to: "fonts/" }
       ],
     }),
-    isHotReloadingEnabled && new ReactRefreshWebpackPlugin({ overlay: false })
+    isHotReloadingEnabled && new ReactRefreshWebpackPlugin({ overlay: false }),
+    new webpack.ProvidePlugin({
+      // Make a global `process` variable that points to the `process` package,
+      // because the `util` package expects there to be a global variable named `process`.
+      // Thanks to https://stackoverflow.com/a/65018686/14239942
+      process: 'process/browser'
+    })
   ].filter(Boolean),
   optimization: {
     splitChunks: {
@@ -137,6 +149,9 @@ const config = {
         test: /\.js$/,
         enforce: "pre",
         use: ["source-map-loader"],
+        resolve: {
+          fullySpecified: false
+        }
       },
       {
         test: /\.(t|j)sx?$/,
@@ -233,7 +248,7 @@ const config = {
       }
     ]
   },
-  devtool: isProduction ? "source-map" : "cheap-eval-module-source-map",
+  devtool: isProduction ? "source-map" : "eval-cheap-module-source-map",
   stats: {
     children: false,
     modules: false,