fix webpack 5 for browser extension (#22991)

client/browser/config/webpack/base.config.ts

@@ -98,9 +98,17 @@ export const config = subtypeOf<webpack.Configuration>()({
         new MiniCssExtractPlugin({ filename: '../css/[name].bundle.css' }),
         // Code splitting doesn't make sense/work in the browser extension, but we still want to use dynamic import()
         new optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+            // Based on the issue: https://github.com/webpack/changelog-v5/issues/10
+            Buffer: ['buffer', 'Buffer'],
+        }),
     ],
     resolve: {
         extensions: ['.ts', '.tsx', '.js'],
+        alias: {
+            path: require.resolve('path-browserify'),
+        },
     },
     module: {
         rules: [

package.json

@@ -360,6 +360,7 @@
     "monaco-editor": "^0.24.0",
     "nice-ticks": "^1.0.1",
     "open-color": "^1.8.0",
+    "path-browserify": "^1.0.1",
     "postcss-inset": "^1.0.0",
     "pretty-bytes": "^5.3.0",
     "prop-types": "^15.7.2",

yarn.lock

@@ -17666,6 +17666,11 @@ password-prompt@^1.0.7:
     ansi-escapes "^3.1.0"
     cross-spawn "^6.0.5"
 
+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"