Only try to connect to the dev tools in development

CommandMC · CommandMC · commit 66deaf232967 · 2023-12-14T19:10:03.000+01:00
diff --git a/index.html b/index.html
@@ -1,8 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <!-- to use with external React Dev Tools -->
-    <script src="http://localhost:8097"></script>
+    <!-- REACT_DEVTOOLS_SCRIPT -->
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig, UserConfigExport } from 'vite'
+import { defineConfig, type Plugin, type UserConfigExport } from 'vite'
 import electron from 'vite-plugin-electron'
 import react from '@vitejs/plugin-react-swc'
 import svgr from 'vite-plugin-svgr'
@@ -24,7 +24,20 @@ const electronViteConfig: UserConfigExport = {
   }
 }
 
-export default defineConfig({
+// FIXME: Potentially publish this as a dedicated plugin, if other projects
+//        run into the same issue
+const vite_plugin_react_dev_tools: Plugin = {
+  name: 'react-dev-tools-replace',
+  transformIndexHtml: {
+    transform: (html) =>
+      html.replace(
+        '<!-- REACT_DEVTOOLS_SCRIPT -->',
+        '<script src="http://localhost:8097"></script>'
+      )
+  }
+}
+
+export default defineConfig(({ mode }) => ({
   build: {
     target: 'esnext',
     outDir: 'build'
@@ -51,6 +64,7 @@ export default defineConfig({
         onstart: ({ reload }) => reload()
       }
     ]),
-    svgr()
+    svgr(),
+    mode !== 'production' && vite_plugin_react_dev_tools
   ]
-})
+}))
