vite-plugin-react-click-to-component

vite-plugin-react-click-to-component

Option+Right Click in your browser to open the source in your editor.

Installation

npm i -D vite-plugin-react-click-to-component

In your Vite config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc"; // or @vitejs/plugin-react
import { reactClickToComponent } from "vite-plugin-react-click-to-component";

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

Inspiration

This plugin is a light version of ericclemmons/click-to-component that uses Vite's launch editor middleware to open the source code in your currently running editor. This also benefits from Vite's transformIndexHtml hook so that you don't need to modify your source code.

Changelog

3.1.0

• Experimental support for React 19. _debugSource was removed in React 19. The PR says that tools should lazily generate component stack strace, but I couldn't find a way to use the React devtools globals to generate one for a given Fiber node. I've aksed some React team members about insights on how to make this works, but for now I decided to patch the jsx dev runtime (when serving it) to reinject into Fiber node the source prop added by JSX transform.