Using React DevTools with Tauri v2 and Vite

2024-10-30 Eiko Wagenknecht

While working on a Tauri v2 app, I wanted to use the React DevTools to inspect the component tree and state of my React app.

Common Approaches
- Direct script inclusion
- Conditional module import
Solution
- How it works
- Benefits
Conclusion

Common Approaches

Direct script inclusion

You might start out by including the React DevTools script directly in your HTML file:

<script src="http://localhost:8097"></script>

This has some downsides:

There is no way to conditionally include the script based on the environment.
The script tag remains in your HTML even in production (though it won’t do anything there).
It mixes development tooling with application code.

Conditional module import

Another approach is to conditionally import the React DevTools module:

// env.ts
export const include_devtools: boolean =
  import.meta.env.VITE_INCLUDE_DEVTOOLS === "true";

<!-- index.html -->
<head>
  <script type="module">
    import { include_devtools } from "@/env.ts";
    if (include_devtools) {
      console.log("Including React devtools");
      var script = document.createElement("script");
      script.src = "http://localhost:8097";
      document.head.appendChild(script);
    }
  </script>
</head>

This is supposed to only include the script tag in development mode. But is has downsides as well:

Most importantly, it won’t work with Tauri v2 because the script loads too late to properly instrument React. This results in the React DevTools not showing the component tree or state of your app and showing a message “Loading React Element Tree…” instead. When you inspect the console, you see a hook.sub is not a function error.
The module script might not be processed correctly by your bundler.
It requires managing environment variables.
Still mixes development tooling with application code.

Solution

Instead, we can create a simple Vite plugin that automatically injects the DevTools script only during development. This works perfectly with Tauri’s development setup. Just add the following plugin to your vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import type { PluginOption } from "vite";

const reactDevTools = (): PluginOption => {
  return {
    name: "react-devtools",
    apply: "serve", // Only apply this plugin during development
    transformIndexHtml(html) {
      return {
        html,
        tags: [
          {
            tag: "script",
            attrs: {
              src: "http://localhost:8097",
            },
            injectTo: "head",
          },
        ],
      };
    },
  };
};

export default defineConfig({
  plugins: [react(), reactDevTools()],
});

How it works

The plugin uses Vite’s transformIndexHtml hook to modify your HTML during build. apply: 'serve' ensures the plugin only runs during development. It injects the DevTools script tag into the <head> of your document. The script loads before your React application starts, allowing the DevTools to properly instrument React.

Benefits

This approach has several benefits:

The DevTools script is only included during development.
It doesn’t require any manual intervention.
It doesn’t mix development tooling with application code.
It works perfectly with Tauri v2.
It’s easy to understand and maintain.
It doesn’t require managing environment variables.
Works regardless of your bundler.

Conclusion

By using a simple Vite plugin, you can automatically include the React DevTools script only during development. This keeps your development tooling separate from your application code and ensures the DevTools work correctly with Tauri v2.

No Comments? No Problem.

This blog doesn't support comments, but your thoughts and questions are always welcome. Reach out through the contact details in the footer below.