build: resolve dependencies injected with the webpack.ProviderPlugin (#48671)

The `require.resolve` and `/index.js` are required for the provided
modules to resolve correctly under bazel, the added `dependencies` are
required because in the root they are `devDependencies` but
`build-config` needs them at runtime (note that "runtime" for
`build-config` is when webpack is run on `client/web`).

client/build-config/BUILD.bazel

@@ -32,7 +32,9 @@ ts_project(
     tsconfig = ":tsconfig",
     deps = [
         ":node_modules/@statoscope/webpack-plugin",
+        ":node_modules/buffer",  #keep
         ":node_modules/monaco-editor-webpack-plugin",
+        ":node_modules/process",  #keep
         ":node_modules/terser-webpack-plugin",
         ":node_modules/webpack",
         "//:node_modules/@types/node",

client/build-config/package.json

@@ -16,16 +16,19 @@
   "peerDependencies": {
     "css-loader": "*",
     "postcss-loader": "*",
-    "sass-loader": "*"
+    "sass-loader": "*",
+    "style-loader": "*"
   },
   "dependencies": {
     "@statoscope/webpack-plugin": "^5.24.0",
+    "buffer": "^6.0.3",
     "enhanced-resolve": "^5.9.3",
     "esbuild": "^0.17.7",
     "monaco-editor-webpack-plugin": "^3.1.0",
     "postcss": "^8.4.19",
     "postcss-cli": "^10.1.0",
     "postcss-modules": "^6.0.0",
+    "process": "^0.11.10",
     "sass": "^1.32.4",
     "signale": "^1.4.0",
     "terser-webpack-plugin": "^5.3.6",

client/build-config/src/webpack/plugins.ts

@@ -22,9 +22,9 @@ export const getProvidePlugin = (): webpack.ProvidePlugin =>
         // Adding the file extension is necessary to make importing this file
         // work inside JavaScript modules. The alternative is to set
         // `fullySpecified: false` (https://webpack.js.org/configuration/module/#resolvefullyspecified).
-        process: 'process/browser.js',
+        process: require.resolve('process/browser.js'),
         // Based on the issue: https://github.com/webpack/changelog-v5/issues/10
-        Buffer: ['buffer', 'Buffer'],
+        Buffer: [require.resolve('buffer/index.js'), 'Buffer'],
     })
 
 const STATOSCOPE_STATS: StatsOptions = {

client/web/BUILD.bazel

@@ -1822,7 +1822,6 @@ jest_test(
 # webpack dev environment -------------------
 WEBPACK_CONFIG_DEPS = [
     ":node_modules/@sourcegraph/build-config",
-    "//:node_modules/@pmmmwh/react-refresh-webpack-plugin",
     "//:node_modules/@sentry/webpack-plugin",
     "//:node_modules/css-loader",
     "//:node_modules/style-loader",

client/web/webpack.bazel.config.js

@@ -2,7 +2,6 @@
 
 const path = require('path')
 
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 const SentryWebpackPlugin = require('@sentry/webpack-plugin')
 const CompressionPlugin = require('compression-webpack-plugin')
 const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
@@ -15,21 +14,18 @@ const { StatsWriterPlugin } = require('webpack-stats-plugin')
 const {
   ROOT_PATH,
   STATIC_ASSETS_PATH,
-  getBabelLoader,
   getCacheConfig,
   getMonacoWebpackPlugin,
   getBazelCSSLoaders: getCSSLoaders,
   getTerserPlugin,
   getProvidePlugin,
   getCSSModulesLoader,
-  getMonacoCSSRule,
   getMonacoTTFRule,
   getBasicCSSLoader,
   getStatoscopePlugin,
 } = require('@sourcegraph/build-config')
 
 const { IS_PRODUCTION, IS_DEVELOPMENT, ENVIRONMENT_CONFIG, writeIndexHTMLPlugin } = require('./dev/utils')
-// const { isHotReloadEnabled } = require('./src/integration/environment')
 
 const {
   NODE_ENV,
@@ -153,8 +149,7 @@ const config = {
     new webpack.DefinePlugin({
       'process.env': mapValues(RUNTIME_ENV_VARIABLES, JSON.stringify),
     }),
-    // TODO(bazel): why does the provide plugin crash?
-    // getProvidePlugin(),
+    getProvidePlugin(),
     new MiniCssExtractPlugin({
       // Do not [hash] for development -- see https://github.com/webpack/webpack-dev-server/issues/377#issuecomment-241258405
       filename:
@@ -175,7 +170,6 @@ const config = {
     }),
     ...(WEBPACK_SERVE_INDEX && IS_PRODUCTION ? [writeIndexHTMLPlugin] : []),
     WEBPACK_BUNDLE_ANALYZER && getStatoscopePlugin(WEBPACK_STATS_NAME),
-    // isHotReloadEnabled && new ReactRefreshWebpackPlugin({ overlay: false }),
     IS_PRODUCTION &&
       new CompressionPlugin({
         filename: '[path][base].gz',

pnpm-lock.yaml

@@ -922,6 +922,7 @@ importers:
     specifiers:
       '@statoscope/webpack-plugin': ^5.24.0
       '@types/sass': 1.16.1
+      buffer: ^6.0.3
       css-loader: '*'
       enhanced-resolve: ^5.9.3
       esbuild: ^0.17.7
@@ -930,14 +931,17 @@ importers:
       postcss-cli: ^10.1.0
       postcss-loader: '*'
       postcss-modules: ^6.0.0
+      process: ^0.11.10
       sass: ^1.32.4
       sass-loader: '*'
       signale: ^1.4.0
+      style-loader: '*'
       terser-webpack-plugin: ^5.3.6
       typed-scss-modules: ^4.1.1
       webpack: '5'
     dependencies:
       '@statoscope/webpack-plugin': 5.24.0_webpack@5.75.0
+      buffer: 6.0.3
       css-loader: 6.7.2_webpack@5.75.0
       enhanced-resolve: 5.10.0
       esbuild: 0.17.8
@@ -946,9 +950,11 @@ importers:
       postcss-cli: 10.1.0_postcss@8.4.21
       postcss-loader: 7.0.2_6jdsrmfenkuhhw3gx4zvjlznce
       postcss-modules: 6.0.0_postcss@8.4.21
+      process: 0.11.10
       sass: 1.32.4
       sass-loader: 13.2.0_sass@1.32.4+webpack@5.75.0
       signale: 1.4.0
+      style-loader: 3.3.1_webpack@5.75.0
       terser-webpack-plugin: 5.3.6_6hyl5w2uqyeivowpusuiulbmoy
       typed-scss-modules: 4.1.1_sass@1.32.4
       webpack: 5.75.0_esbuild@0.17.8
@@ -31067,8 +31073,7 @@ packages:
     peerDependencies:
       webpack: ^5.0.0
     dependencies:
-      webpack: 5.75.0_cf7cgeqdkm72g3fdehkr7aaod4
-    dev: true
+      webpack: 5.75.0_esbuild@0.17.8
 
   /style-mod/4.0.0:
     resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}