chore: upgrade webpack to v5 to support lts/hydrogen (#1422)

* upgrade dependencies and fix API changes

* skipLibCheck

* attempt test fixes

* fix attempt

* stream-http

* fix final thing i think

package.json

@@ -10,7 +10,7 @@
     "@types/node-fetch": "^2.6.2",
     "@typescript-eslint/eslint-plugin": "^5.14.0",
     "@typescript-eslint/parser": "^5.14.0",
-    "@webpack-cli/serve": "^1.6.1",
+    "@webpack-cli/serve": "^2.0.5",
     "browserslist": "^4.20.3",
     "eslint": "^8.10.0",
     "eslint-import-resolver-typescript": "^2.7.1",

src/metrics_server/tsconfig.json

@@ -4,7 +4,8 @@
     "removeComments": false,
     "strict": true,
     "module": "commonjs",
-    "outDir": "../../build/metrics_server"
+    "outDir": "../../build/metrics_server",
+    "skipLibCheck": true
   },
   "include": ["**/*.ts"]
 }

src/sentry_webhook/package.json

@@ -9,6 +9,9 @@
     "@sentry/types": "^4.4.1",
     "@types/express": "^4.17.12",
     "@types/jasmine": "^5.1.0",
-    "jasmine": "^5.1.0"
+    "https-browserify": "^1.0.0",
+    "jasmine": "^5.1.0",
+    "stream-http": "^3.2.0",
+    "url": "^0.11.3"
   }
 }

src/sentry_webhook/test.webpack.js

@@ -26,6 +26,13 @@ exports.makeConfig = (options) => {
         },
       ],
     },
-    resolve: {extensions: ['.tsx', '.ts', '.js']},
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+      fallback: {
+        https: require.resolve('https-browserify'),
+        url: require.resolve('url/'),
+        http: require.resolve('stream-http'),
+      },
+    },
   };
 };

src/sentry_webhook/tsconfig.json

@@ -4,7 +4,8 @@
     "removeComments": false,
     "strict": true,
     "module": "commonjs",
-    "outDir": "../../build/sentry_webhook"
+    "outDir": "../../build/sentry_webhook",
+    "skipLibCheck": true
   },
   "include": ["**/*.ts"]
 }

src/server_manager/base.webpack.js

@@ -66,17 +66,16 @@ exports.makeConfig = (options) => {
         // Statically link the Roboto font, rather than link to fonts.googleapis.com
         'window.polymerSkipLoadingFontRoboto': JSON.stringify(true),
       }),
-      new CopyPlugin(
-        [
-          {from: 'index.html', to: '.'},
-          {from: `${CIRCLE_FLAGS_PATH}/flags`, to: 'images/flags'},
-          {from: 'images', to: 'images'}, // Overwrite any colliding flags.
-          {from: 'messages', to: 'messages'},
+      new CopyPlugin({
+        patterns: [
+          {from: `${CIRCLE_FLAGS_PATH}/flags`, to: 'images/flags', context: __dirname},
+          {from: 'images', to: 'images', context: __dirname}, // Overwrite any colliding flags.
+          {from: 'messages', to: 'messages', context: __dirname},
         ],
-        {context: __dirname}
-      ),
+      }),
       new HtmlWebpackPlugin({
         template: options.template || path.resolve(__dirname, './index.html'),
+        filename: 'index.html',
       }),
     ],
   };

src/server_manager/package.json

@@ -76,8 +76,8 @@
     "@types/puppeteer": "^5.4.2",
     "@types/request": "^2.47.1",
     "@types/semver": "^5.5.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.5.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
     "electron": "19.1.9",
     "electron-builder": "^23.6.0",
     "electron-icon-maker": "^0.0.4",
@@ -86,21 +86,21 @@
     "gulp": "^4.0.0",
     "gulp-posthtml": "^3.0.4",
     "gulp-replace": "^1.0.0",
-    "html-webpack-plugin": "^4.2.1",
+    "html-webpack-plugin": "^5.5.3",
     "karma": "^6.3.16",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^4.0.1",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
     "node-jq": "^1.11.2",
     "postcss": "^7.0.29",
     "postcss-rtl": "^1.7.3",
     "posthtml-postcss": "^0.2.6",
     "puppeteer": "^13.6.0",
-    "style-loader": "^1.2.1",
-    "ts-loader": "^7.0.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.5.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
     "webpack-node-externals": "^3.0.0"
   },
   "resolutions": {

src/server_manager/web_app/karma.conf.js

@@ -13,6 +13,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+const webpack = require('webpack');
 const {makeConfig} = require('../base.webpack.js');
 process.env.CHROMIUM_BIN = require('puppeteer').executablePath();
 
@@ -45,7 +46,12 @@ module.exports = function (config) {
     webpack: {
       module: baseConfig.module,
       resolve: baseConfig.resolve,
-      plugins: baseConfig.plugins,
+      plugins: [
+        ...baseConfig.plugins,
+        new webpack.ProvidePlugin({
+          process: 'process/browser',
+        }),
+      ],
       mode: baseConfig.mode,
     },
   });

src/shadowbox/package.json

@@ -28,8 +28,8 @@
     "@types/restify-cors-middleware": "^1.0.1",
     "@types/tmp": "^0.2.1",
     "tmp": "^0.2.1",
-    "ts-loader": "^7.0.4",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "ts-loader": "^9.5.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   }
 }

src/shadowbox/tsconfig.json

@@ -7,7 +7,8 @@
     "module": "commonjs",
     "rootDir": ".",
     "resolveJsonModule": true,
-    "sourceMap": true
+    "sourceMap": true,
+    "skipLibCheck": true
   },
   "include": ["server/main.ts", "**/*.spec.ts", "types/**/*.d.ts"],
   "exclude": ["build", "node_modules"]

tsconfig.json

@@ -9,6 +9,7 @@
     "experimentalDecorators": true,
     "allowJs": true,
     "resolveJsonModule": true,
-    "noUnusedLocals": true
+    "noUnusedLocals": true,
+    "skipLibCheck": true
   }
 }