Update to webpack 5

package.json

@@ -48,7 +48,7 @@
         "start": "yarn build:module_system && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
         "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"",
         "start:res": "yarn build:jitsi && ts-node scripts/copy-res.ts -w",
-        "start:js": "webpack serve --output-path webapp --mode development",
+        "start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
         "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
         "lint:js": "yarn lint:js:src && yarn lint:js:module_system",
         "lint:js:src": "eslint --max-warnings 0 src test && prettier --check .",
@@ -103,7 +103,7 @@
         "@babel/runtime": "^7.12.5",
         "@casualbot/jest-sonar-reporter": "^2.2.5",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
-        "@sentry/webpack-plugin": "^2.0.0",
+        "@sentry/webpack-plugin": "^2.7.1",
         "@svgr/webpack": "^5.5.0",
         "@testing-library/react": "^12.1.5",
         "@types/jest": "^29.0.0",
@@ -122,6 +122,7 @@
         "allchange": "^1.0.6",
         "babel-jest": "^29.0.0",
         "babel-loader": "^8.2.2",
+        "buffer": "^6.0.3",
         "chokidar": "^3.5.1",
         "concurrently": "^8.0.0",
         "cpx": "1.5.0",
@@ -141,7 +142,7 @@
         "fetch-mock-jest": "^1.5.1",
         "file-loader": "^6.0.0",
         "fs-extra": "^11.0.0",
-        "html-webpack-plugin": "^4.5.2",
+        "html-webpack-plugin": "^5.5.3",
         "jest": "^29.0.0",
         "jest-canvas-mock": "2.5.2",
         "jest-environment-jsdom": "^29.0.0",
@@ -151,12 +152,12 @@
         "loader-utils": "^3.0.0",
         "matrix-mock-request": "^2.5.0",
         "matrix-web-i18n": "^3.1.1",
-        "mini-css-extract-plugin": "^1",
+        "mini-css-extract-plugin": "^2.7.6",
         "minimist": "^1.2.6",
         "mkdirp": "^3.0.0",
         "modernizr": "^3.12.0",
         "node-fetch": "^2.6.7",
-        "optimize-css-assets-webpack-plugin": "^6.0.0",
+        "optimize-css-assets-webpack-plugin": "^6.0.1",
         "postcss": "^8.4.16",
         "postcss-easings": "^2.0.0",
         "postcss-hexrgba": "2.0.1",
@@ -168,20 +169,23 @@
         "postcss-scss": "^4.0.4",
         "postcss-simple-vars": "^5.0.2",
         "prettier": "2.8.8",
+        "process": "^0.11.10",
         "proxy-agent": "^6.3.0",
         "raw-loader": "^4.0.2",
         "rimraf": "^5.0.0",
         "semver": "^7.5.2",
+        "setimmediate": "^1.0.5",
         "string-replace-loader": "3",
         "style-loader": "2",
         "stylelint": "^15.10.1",
         "stylelint-config-standard": "^34.0.0",
         "stylelint-scss": "^5.0.0",
-        "terser-webpack-plugin": "^4.0.0",
+        "terser-webpack-plugin": "^5.3.9",
         "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
         "typescript": "5.1.6",
-        "webpack": "^4.47.0",
+        "util": "^0.12.5",
+        "webpack": "^5.88.2",
         "webpack-bundle-analyzer": "^4.8.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "^4.15.1",

src/components/views/auth/VectorAuthPage.tsx

@@ -16,8 +16,7 @@ limitations under the License.
 
 import * as React from "react";
 import SdkConfig from "matrix-react-sdk/src/SdkConfig";
-
-import VectorAuthFooter from "./VectorAuthFooter";
+import AuthFooter from "matrix-react-sdk/src/components/views/auth/AuthFooter";
 
 export default class VectorAuthPage extends React.PureComponent {
     private static welcomeBackgroundUrl?: string;
@@ -77,7 +76,7 @@ export default class VectorAuthPage extends React.PureComponent {
                         {this.props.children}
                     </div>
                 </div>
-                <VectorAuthFooter />
+                <AuthFooter />
             </div>
         );
     }

src/vector/index.html

@@ -49,10 +49,9 @@
         <% }
     } %>
 
-    <% for (var i=0; i < htmlWebpackPlugin.tags.headTags.length; i++) {
-        var tag = htmlWebpackPlugin.tags.headTags[i];
-        var path = tag.attributes && tag.attributes.href;
-        if (path.includes("/Inter/")) { %>
+    <% for (const tag of htmlWebpackPlugin.tags.headTags) {
+        let path = tag.attributes && tag.attributes.href;
+        if (path && path.includes("/Inter/")) { %>
             <link rel="preload" as="font" href=".<%= path %>" crossorigin="anonymous"/>
         <% }
     } %>

src/vector/index.ts

@@ -25,6 +25,9 @@ import { extractErrorMessageFromError } from "matrix-react-sdk/src/components/vi
 import { parseQsFromFragment } from "./url_utils";
 import "./modernizr";
 
+// Make setImmediate available in bundle
+import "setimmediate";
+
 // Require common CSS here; this will make webpack process it into bundle.css.
 // Our own CSS (which is themed) is imported via separate webpack entry points
 // in webpack.config.js

webpack.config.js

@@ -146,14 +146,6 @@ module.exports = (env, argv) => {
 
         bail: true,
 
-        node: {
-            // Mock out the NodeFS module: The opus decoder imports this wrongly.
-            fs: "empty",
-            net: "empty",
-            tls: "empty",
-            crypto: "empty",
-        },
-
         entry: {
             bundle: "./src/vector/index.ts",
             mobileguide: "./src/vector/mobile_guide/index.ts",
@@ -193,7 +185,7 @@ module.exports = (env, argv) => {
 
             // This fixes duplicate files showing up in chrome with sourcemaps enabled.
             // See https://github.com/webpack/webpack/issues/7128 for more info.
-            namedModules: false,
+            moduleIds: "named",
 
             // Minification is normally enabled by default for webpack in production mode, but
             // we use a CSS optimizer too and need to manage it ourselves.
@@ -241,6 +233,16 @@ module.exports = (env, argv) => {
                 // Define a variable so the i18n stuff can load
                 "$webapp": path.resolve(__dirname, "webapp"),
             },
+            fallback: {
+                // Mock out the NodeFS module: The opus decoder imports this wrongly.
+                fs: false,
+                net: false,
+                tls: false,
+                crypto: false,
+
+                // Polyfill needed by counterpart
+                util: require.resolve("util/"),
+            }
         },
 
         module: {
@@ -708,7 +710,15 @@ module.exports = (env, argv) => {
                         console.log(`::warning title=Sentry error::${err.message}`);
                     },
                 }),
+
             new webpack.EnvironmentPlugin(["VERSION"]),
+
+            // Automatically load buffer & process modules. Webpack 5 doesn't polyfill them
+            // automatically anymore.
+            new webpack.ProvidePlugin({
+                Buffer: ['buffer', 'Buffer'],
+                process: 'process/browser',
+            }),
         ].filter(Boolean),
 
         output: {