Registry / devops / vite-plugin-react-inspector

vite-plugin-react-inspector

library0.3.3jsnpmunverified

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.

devops

npm install vite-plugin-react-inspector

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-REACT-

vite-plugin-react-inspector

devopsjavascriptv0.3.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReactInspector

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

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

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

ReactInspector (type)

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

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

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

Plugin (as function call)

✓ ReactInspector()

✗ new ReactInspector()

Do not use 'new'; it's a factory function, not a constructor.

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)

Debug

Known issues

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

fix

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

affects: >=0.1.0

gotchaOn Windows, file paths may not be opened correctly due to backslash issues.

fix

Upgrade to 0.3.3+ which fixes Windows path handling.

affects: <=0.3.2

gotchaReact Fragments (<>...</>) may cause issues in older versions.

fix

Upgrade to 0.3.3+ for React Fragment support.

affects: <=0.3.2

gotchaThe 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).

affects: >=0.1.0

deprecatedThe 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.

affects: >=0.1.0

Errors

Common errors & fixes

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

Package not installed or missing from node_modules.

fix

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

TypeError: ReactInspector is not a function

Using named import instead of default import.

fix

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

Cannot read property 'transform' of undefined

Plugin order incorrect: ReactInspector placed after react plugin.

fix

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

The inspector click does nothing

REACT_EDITOR environment variable not set or incorrect.

fix

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

Upgrade

Version history

0.3.3latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/sudongyuer/vite-plugin-react-inspector ↗

packagehttps://www.npmjs.com/package/vite-plugin-react-inspector ↗