Update from webpack4 to webpack5 (#7507)

package.json

@@ -47,7 +47,7 @@
     "@ant-design/icons": "^4.2.1",
     "@redash/viz": "file:viz-lib",
     "ace-builds": "^1.4.12",
-    "antd": "^4.4.3",
+    "antd": "4.4.3",
     "axios": "0.27.2",
     "axios-auth-refresh": "3.3.6",
     "bootstrap": "^3.4.1",
@@ -100,6 +100,7 @@
     "@types/sql-formatter": "^2.3.0",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
+    "assert": "^2.1.0",
     "atob": "^2.1.2",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.1.0",
@@ -139,20 +140,23 @@
     "mockdate": "^2.0.2",
     "npm-run-all": "^4.1.5",
     "prettier": "3.3.2",
+    "process": "^0.11.10",
     "raw-loader": "^0.5.1",
     "react-refresh": "^0.14.0",
     "react-test-renderer": "^16.14.0",
     "request-cookies": "^1.1.0",
     "source-map-loader": "^1.1.3",
+    "stream-browserify": "^3.0.0",
     "style-loader": "^2.0.0",
-    "typescript": "^4.1.2",
+    "typescript": "4.1.2",
+    "url": "^0.11.4",
     "url-loader": "^4.1.1",
-    "webpack": "^4.46.0",
-    "webpack-build-notifier": "^2.3.0",
+    "webpack": "^5.101.3",
+    "webpack-build-notifier": "^3.0.1",
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.15.1",
-    "webpack-manifest-plugin": "^2.0.4"
+    "webpack-manifest-plugin": "^5.0.1"
   },
   "optionalDependencies": {
     "fsevents": "^2.3.2"

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,