vite-plugin-react-inspector

0.3.3 verified Mon Apr 27 auth: no javascript

Vite plugin that enables clicking on React components in the browser to open their source code in your local IDE. Current stable version is 0.3.3, released in July 2024. It supports React 16, 17, and 18, and works out of the box with Vite. Unlike Chrome inspector, it jumps directly to the component's source file and line. The plugin must be placed before the React plugin in vite.config.ts. It uses the REACT_EDITOR environment variable to specify the IDE. Inspired by vite-plugin-vue-inspector.

Common errors

error Cannot find module 'vite-plugin-react-inspector' ↓

cause Package not installed or missing from node_modules.

fix

Run: npm install vite-plugin-react-inspector -D

error TypeError: ReactInspector is not a function ↓

cause Using named import instead of default import.

fix

Use: import ReactInspector from 'vite-plugin-react-inspector'

error Cannot read property 'transform' of undefined ↓

cause Plugin order incorrect: ReactInspector placed after react plugin.

fix

Swap plugin order: ReactInspector() before react().

error The inspector click does nothing ↓

cause REACT_EDITOR environment variable not set or incorrect.

fix

Set REACT_EDITOR to your editor command (e.g., 'code' for VS Code).

Warnings

breaking Plugin must be placed before @vitejs/plugin-react in plugins array, otherwise inspector won't work. ↓

fix Reorder plugins so ReactInspector() comes before react().

gotcha On Windows, file paths may not be opened correctly due to backslash issues. ↓

fix Upgrade to 0.3.3+ which fixes Windows path handling.

gotcha React Fragments (<>...</>) may cause issues in older versions. ↓

fix Upgrade to 0.3.3+ for React Fragment support.

gotcha The REACT_EDITOR environment variable must be set for the plugin to open the editor; otherwise nothing happens on click. ↓

fix Set REACT_EDITOR in your shell profile (e.g., export REACT_EDITOR=code).

deprecated The plugin only works with Vite build tool; not compatible with Webpack or other bundlers. ↓

fix Use only with Vite; for Webpack consider react-dev-inspector.

Install

npm install vite-plugin-react-inspector

yarn add vite-plugin-react-inspector

pnpm add vite-plugin-react-inspector

Imports

ReactInspector

wrong

const ReactInspector = require('vite-plugin-react-inspector')

correct

import ReactInspector from 'vite-plugin-react-inspector'

Default ESM import; CommonJS require may fail in ESM projects.

ReactInspector (type)

wrong

import { ReactInspector } from 'vite-plugin-react-inspector'

correct

import type ReactInspector from 'vite-plugin-react-inspector'

Named import incorrect; use default import for both value and type.

Plugin (as function call)
wrong
```
new ReactInspector()
```
correct
```
ReactInspector()
```
Do not use 'new'; it's a factory function, not a constructor.

Quickstart

Shows how to configure vite.config.ts with ReactInspector plugin placed before @vitejs/plugin-react and set the REACT_EDITOR environment variable.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import ReactInspector from 'vite-plugin-react-inspector'

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

// Ensure REACT_EDITOR env var is set (e.g., export REACT_EDITOR=code for VS Code)