Inject React DevTools hook only in dev via Vite plugin

2026-08-13 11:27:53 +02:00
parent 5c7276cf35
commit 3f0c87924b
2 changed files with 17 additions and 2 deletions
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
    <link rel="icon" type="image/svg+xml" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RogueHunter</title>
-    <script src="http://localhost:8097"></script>
  </head>
  <body>
    <div id="root"></div>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,10 +2,26 @@ import { defineConfig } from 'vite'
 import react, { reactCompilerPreset } from '@vitejs/plugin-react'
 import babel from '@rolldown/plugin-babel'

+// Inject the React DevTools standalone hook only during `vite` dev (serve),
+// so it never ships in a production build.
+const devtools = () => ({
+  name: 'react-devtools-dev-only',
+  apply: 'serve' as const,
+  transformIndexHtml: {
+    order: 'pre' as const,
+    handler: (html: string) =>
+      html.replace(
+        '</head>',
+        '    <script src="http://localhost:8097"></script>\n  </head>',
+      ),
+  },
+})
+
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
    react(),
-    babel({ presets: [reactCompilerPreset()] })
+    babel({ presets: [reactCompilerPreset()] }),
+    devtools(),
  ],
 })