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
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
devBot
✓ import { devBot } from 'react-dev-bot/vite'
✗ import { devBot } from 'react-dev-bot'
Legacy import from 'react-dev-bot' still works but is not recommended; prefer '/vite' for clarity.
DevBot
✓ import { DevBot } from 'react-dev-bot/next'
✗ import { DevBot } from 'react-dev-bot'
React component for Next.js; must be imported from '/next' subpath.
DevBotErrorBoundary
✓ import { DevBotErrorBoundary } from 'react-dev-bot/next'
Optional error boundary for React render errors; only active in development by default.
GET
✓ export { GET } from 'react-dev-bot/next/route'
✗ import { GET } from 'react-dev-bot/next/route'
Re-export for Next.js API route handler; must be used in route.ts file with catch-all path.
POST
✓ export { POST } from 'react-dev-bot/next/route'
Same as GET above, for POST requests.
inspectorCursorServer
✓ import { inspectorCursorServer } from 'react-dev-bot/vite'
Vite plugin for sourcemap-based component locator; requires VITE_LOCATOR=true and sourcemaps enabled.
Minimal setup for both Vite and Next.js projects: install package, configure plugins/routes, mount DevBot component, and start dev server.
# Install as dev dependency
pnpm add -D react-dev-bot
# Ensure Claude Code CLI is available in PATH
claude --version
# Set up environment variables in .env.development
VITE_LOCATOR=true
REACT_EDITOR=cursor
# Vite: configure vite.config.ts
import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { devBot, inspectorCursorServer } from 'react-dev-bot/vite';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
const locatorEnabled = env.VITE_LOCATOR === 'true';
if (env.REACT_EDITOR) process.env.REACT_EDITOR = env.REACT_EDITOR;
return {
build: {
sourcemap: locatorEnabled ? 'hidden' : false,
...(locatorEnabled && {
rollupOptions: { output: { sourcemapExcludeSources: true } },
}),
},
plugins: [
...(locatorEnabled ? [inspectorCursorServer()] : []),
...(mode === 'development' ? [devBot()] : []),
react(),
],
};
});
# Next.js: add API route at app/api/dev/[...path]/route.ts
// app/api/dev/[...path]/route.ts
export { GET, POST } from 'react-dev-bot/next/route';
# Next.js: mount DevBot in root layout
// app/layout.tsx
import { DevBot } from 'react-dev-bot/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<DevBot />
{children}
</body>
</html>
);
}
# Start dev server
pnpm dev
# On startup, a random token is printed to stderr if DEVBOT_TOKEN not set.
# Open browser and look for the DevBot panel (usually bottom-right corner).
Errors
Common errors & fixes
Error: Cannot find module 'react-dev-bot/vite'
Installed package does not include the 'vite' subpath export or package is older version.
fixUpdate package to latest: `pnpm add -D react-dev-bot@latest`.
Error: The inspectorCursorServer plugin requires VITE_LOCATOR=true and sourcemaps to be enabled.
Missing environment variable or sourcemap configuration in vite.config.ts.
fixSet `VITE_LOCATOR=true` in .env.development and enable `build.sourcemap: 'hidden'` in Vite config.
Error: The devBot plugin is only available in development mode.
devBot() was added to plugins array outside of development mode check.
fixWrap devBot() in `...(mode === 'development' ? [devBot()] : [])`.
Error: Route "app/api/dev/[...path]/route.ts" does not match the route handler.
Missing or incorrectly placed catch-all route file.
fixCreate `app/api/dev/[...path]/route.ts` and export GET/POST from `react-dev-bot/next/route`.
Error: DevBot is not defined (Next.js build error)
Import of DevBot from incorrect path; must be from 'react-dev-bot/next'.
fixUse `import { DevBot } from 'react-dev-bot/next'` instead of from top-level package. Audit
Dependencies
nextoptionalRequired for Next.js integration; peer dependency
reactrequiredCore peer dependency for React components
viteoptionalRequired for Vite integration; peer dependency