Update tests to Webpack 5 (v4 is unusable with Node 18)

Author: pimterry

karma.conf.js

@@ -2,52 +2,81 @@ const tmp = require('tmp');
 tmp.setGracefulCleanup();
 
 const webpack = require('webpack');
+const outputDir = tmp.dirSync({ unsafeCleanup: true }).name;
 
 // Run a websocket server in the background for testing
 require('./test/fixtures/websocket-test-server');
 
 module.exports = function(config) {
     config.set({
-        frameworks: ['mocha', 'chai'],
+        frameworks: ['mocha', 'chai', 'webpack'],
         files: [
-            'test/**/*.spec.ts'
+            'test/**/*.spec.ts',
+            // Required for wasm due to https://github.com/ryanclark/karma-webpack/issues/498. Results
+            // in an annoying warning before the webpack build, but then it works fine.
+            { pattern: `${outputDir}/**/*`, included: false, served: true }
         ],
         mime: { 'text/x-typescript': ['ts'] },
         webpack: {
             mode: 'development',
-            devtool: false,
+            devtool: 'source-map',
             resolve: {
                 extensions: ['.ts', '.js'],
                 alias: {
                     // Here we put stubs for non-browser modules that are used by tests, not core code.
                     // Core code stubs are set in pkgJson.browser.
-                    "http-proxy-agent$": require.resolve('./test/empty-stub.js'),
-                    "https-proxy-agent$": require.resolve('./test/empty-stub.js'),
-                    "request-promise-native$": require.resolve('./test/empty-stub.js'),
-                    "fs-extra$": require.resolve('./test/empty-stub.js'),
-                    "portfinder$": require.resolve('./test/empty-stub.js')
+                    "http-proxy-agent": require.resolve('./test/empty-stub.js'),
+                    "https-proxy-agent": require.resolve('./test/empty-stub.js'),
+                    "request-promise-native": require.resolve('./test/empty-stub.js'),
+                    "fs-extra": require.resolve('./test/empty-stub.js'),
+                    "portfinder": require.resolve('./test/empty-stub.js'),
+                    "dns2": require.resolve('./test/empty-stub.js')
+                },
+                fallback: {
+                    // With Webpack 5, we need explicit mocks for all node modules. Because the
+                    // tests are the same for node & browser, with tests simply skipped in
+                    // browsers, plus some actual deps on node modules, we end up with a bunch
+                    // of deps that need to be manually included/skipped here:
+                    fs: false,
+                    net: false,
+                    http: false,
+                    https: false,
+                    http2: false,
+                    tls: false,
+
+                    assert: require.resolve('assert/'),
+                    buffer: require.resolve('buffer/'),
+                    crypto: require.resolve('crypto-browserify'),
+                    zlib: require.resolve('browserify-zlib'),
+                    stream: require.resolve('stream-browserify'),
+                    path: require.resolve('path-browserify'),
+                    querystring: require.resolve('querystring-es3'),
+                    util: require.resolve('util/'),
+                    url: require.resolve('url/')
                 }
             },
             module: {
                 rules: [
                     { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ }
                 ]
             },
+            experiments: {
+                asyncWebAssembly: true
+            },
             node: {
-                fs: 'empty',
                 __dirname: true
             },
             plugins: [
-                new webpack.IgnorePlugin(/^dns2$/),
-                new webpack.DefinePlugin({
-                    "process.version": '"' + process.version + '"'
-                }),
                 new webpack.SourceMapDevToolPlugin({
                     test: /\.(ts|js|css)($|\?)/i
+                }),
+                new webpack.ProvidePlugin({
+                    process: 'process/browser',
+                    Buffer: ['buffer', 'Buffer'],
                 })
             ],
             output: {
-                path: tmp.dirSync()
+                path: outputDir
             }
         },
         webpackMiddleware: {

package.json

@@ -117,11 +117,15 @@
     "@types/uuid": "8.3.4",
     "@types/ws": "7.4.7",
     "agent-base": "^4.2.1",
+    "assert": "^2.0.0",
     "brotli-wasm": "^1.0.0",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
     "catch-uncommitted": "^1.0.0",
     "chai": "^3.5.0",
     "chai-as-promised": "^6.0.0",
     "chai-fetch": "^0.3.1",
+    "crypto-browserify": "^3.12.0",
     "dns2": "1.4.2",
     "fs-extra": "^8.1.0",
     "http-proxy-agent": "^2.0.0",
@@ -132,22 +136,28 @@
     "karma-mocha": "^2.0.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.32",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "mocha": "^9.1.3",
     "node-abort-controller": "^3.0.1",
-    "null-loader": "^3.0.0",
     "opn": "^5.1.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "querystring-es3": "^0.2.1",
     "request": "^2.75.0",
     "request-promise-native": "^1.0.3",
     "rimraf": "^2.5.4",
     "semver": "^5.5.0",
     "source-map-support": "^0.5.3",
+    "stream-browserify": "^3.0.0",
     "tmp-promise": "^1.0.3",
-    "ts-loader": "^8.0.2",
+    "ts-loader": "^9.2.9",
     "ts-node": "^9.1.1",
     "typedoc": "^0.22.4",
     "typescript": "4.5.5",
-    "webpack": "^4.46.0",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "webpack": "^5.72.0",
+    "zlib-browserify": "^0.0.3",
     "zstd-codec": "^0.1.4"
   },
   "engines": {