{"id":22802,"library":"vite-plugin-react-inspector","title":"vite-plugin-react-inspector","description":"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.","status":"active","version":"0.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/sudongyuer/vite-plugin-react-inspector","tags":["javascript","vite","vite-plugin","vite-plugin-react-inspector","typescript"],"install":[{"cmd":"npm install vite-plugin-react-inspector","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-react-inspector","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-react-inspector","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default ESM import; CommonJS require may fail in ESM projects.","wrong":"const ReactInspector = require('vite-plugin-react-inspector')","symbol":"ReactInspector","correct":"import ReactInspector from 'vite-plugin-react-inspector'"},{"note":"Named import incorrect; use default import for both value and type.","wrong":"import { ReactInspector } from 'vite-plugin-react-inspector'","symbol":"ReactInspector (type)","correct":"import type ReactInspector from 'vite-plugin-react-inspector'"},{"note":"Do not use 'new'; it's a factory function, not a constructor.","wrong":"new ReactInspector()","symbol":"Plugin (as function call)","correct":"ReactInspector()"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport ReactInspector from 'vite-plugin-react-inspector'\n\nexport default defineConfig({\n  plugins: [\n    ReactInspector(),\n    react(),\n  ],\n})\n\n// Ensure REACT_EDITOR env var is set (e.g., export REACT_EDITOR=code for VS Code)","lang":"typescript","description":"Shows how to configure vite.config.ts with ReactInspector plugin placed before @vitejs/plugin-react and set the REACT_EDITOR environment variable."},"warnings":[{"fix":"Reorder plugins so ReactInspector() comes before react().","message":"Plugin must be placed before @vitejs/plugin-react in plugins array, otherwise inspector won't work.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Upgrade to 0.3.3+ which fixes Windows path handling.","message":"On Windows, file paths may not be opened correctly due to backslash issues.","severity":"gotcha","affected_versions":"<=0.3.2"},{"fix":"Upgrade to 0.3.3+ for React Fragment support.","message":"React Fragments (<>...</>) may cause issues in older versions.","severity":"gotcha","affected_versions":"<=0.3.2"},{"fix":"Set REACT_EDITOR in your shell profile (e.g., export REACT_EDITOR=code).","message":"The REACT_EDITOR environment variable must be set for the plugin to open the editor; otherwise nothing happens on click.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use only with Vite; for Webpack consider react-dev-inspector.","message":"The plugin only works with Vite build tool; not compatible with Webpack or other bundlers.","severity":"deprecated","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run: npm install vite-plugin-react-inspector -D","cause":"Package not installed or missing from node_modules.","error":"Cannot find module 'vite-plugin-react-inspector'"},{"fix":"Use: import ReactInspector from 'vite-plugin-react-inspector'","cause":"Using named import instead of default import.","error":"TypeError: ReactInspector is not a function"},{"fix":"Swap plugin order: ReactInspector() before react().","cause":"Plugin order incorrect: ReactInspector placed after react plugin.","error":"Cannot read property 'transform' of undefined"},{"fix":"Set REACT_EDITOR to your editor command (e.g., 'code' for VS Code).","cause":"REACT_EDITOR environment variable not set or incorrect.","error":"The inspector click does nothing"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}