Fix react app build script

webview-ui/package-lock.json

@@ -19,6 +19,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
+        "rewire": "^7.0.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       },
@@ -16494,6 +16495,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rewire": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rewire/-/rewire-7.0.0.tgz",
+      "integrity": "sha512-DyyNyzwMtGYgu0Zl/ya0PR/oaunM+VuCuBxCuhYJHHaV0V+YvYa3bBGxb5OZ71vndgmp1pYY8F4YOwQo1siRGw==",
+      "license": "MIT",
+      "dependencies": {
+        "eslint": "^8.47.0"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",

webview-ui/package.json

@@ -14,12 +14,13 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "rewire": "^7.0.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "node ./scripts/build-react-no-split.js",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

webview-ui/scripts/build-react-no-split.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+/**
+ * A script that overrides some of the create-react-app build script configurations
+ * in order to disable code splitting/chunking and rename the output build files so
+ * they have no hash. (Reference: https://mtm.dev/disable-code-splitting-create-react-app).
+ *
+ * This is crucial for getting React webview code to run because VS Code expects a
+ * single (consistently named) JavaScript and CSS file when configuring webviews.
+ */
+
+const rewire = require("rewire")
+const defaults = rewire("react-scripts/scripts/build.js")
+const config = defaults.__get__("config")
+
+// Disable code splitting
+config.optimization.splitChunks = {
+	cacheGroups: {
+		default: false,
+	},
+}
+
+// Disable code chunks
+config.optimization.runtimeChunk = false
+
+// Rename main.{hash}.js to main.js
+config.output.filename = "static/js/[name].js"
+
+// Rename main.{hash}.css to main.css
+config.plugins[5].options.filename = "static/css/[name].css"
+config.plugins[5].options.moduleFilename = () => "static/css/main.css"