From ecc
Fixes React build failures by detecting the bundler, parsing errors, and applying incremental fixes for JSX/TSX, hydration, and component boundary issues.
How this command is triggered — by the user, by Claude, or both
Slash command
/ecc:react-buildFiles this command reads when invoked
The summary Claude sees in its command listing — used to decide when to auto-load this command
# React Build and Fix This command invokes the **react-build-resolver** agent to incrementally fix React build errors with minimal changes. ## What This Command Does 1. **Detect Build System**: Identify Vite, webpack, Next.js, CRA, Parcel, esbuild, or Bun 2. **Run Build**: Execute the project's build script 3. **Parse Errors**: Group by layer (TypeScript / bundler config / runtime / hydration) 4. **Fix Incrementally**: One error at a time, re-running build after each change 5. **Report Summary**: Show what was fixed and what remains ## When to Use Use `/react-build` when: - `npm run b...
This command invokes the react-build-resolver agent to incrementally fix React build errors with minimal changes.
Use /react-build when:
npm run build (or pnpm/yarn/bun equivalent) failsreact, react-dom, @types/react, or a bundlerThis command owns React build/bundler/runtime hydration failures. For pure TypeScript type errors with no React involvement, use /build-fix (generic) instead.
# Project build script (preferred)
npm run build --if-present
pnpm build 2>/dev/null
yarn build 2>/dev/null
bun run build 2>/dev/null
# Standalone typecheck
npm run typecheck --if-present
tsc --noEmit -p tsconfig.json
# Bundler-specific fallback
next build # Next.js
vite build # Vite
react-scripts build # CRA
webpack --mode=production # webpack
parcel build src/index.html # Parcel
bun build ./src/index.tsx --outdir=dist
User: /react-build
Agent:
# React Build Resolution
## Build System Detected
Vite (vite.config.ts present, @vitejs/plugin-react in deps)
## Initial Diagnostics
```bash
$ npm run build
> tsc -b && vite build
src/components/UserCard.tsx:1:8 - error TS6133: 'React' is declared but its value is never read.
src/components/Modal.tsx:12:15 - error TS7016: Could not find a declaration file for module 'react-portal'.
src/pages/Home.tsx:42:5 - error: 'useState' is not defined
```
Errors found: 3
## Fix 1: Old JSX transform leftover
File: src/components/UserCard.tsx:1
Cause: `tsconfig.json` already uses `"jsx": "react-jsx"`; the explicit `import React` is unused.
```tsx
// Removed
- import React from 'react';
```
```bash
$ npm run build
# 2 errors remaining
```
## Fix 2: Missing types
File: src/components/Modal.tsx
Cause: `@types/react-portal` not installed.
```bash
$ npm i -D @types/react-portal
added 1 package
```
```bash
$ npm run build
# 1 error remaining
```
## Fix 3: Missing hook import
File: src/pages/Home.tsx
Cause: `useState` referenced but not imported.
```tsx
- import { useEffect } from "react";
+ import { useEffect, useState } from "react";
```
```bash
$ npm run build
# Build successful!
```
## Final Verification
```bash
$ npm run build
✓ built in 2.34s
$ npm test
✓ 47 tests passed
```
## Summary
| Metric | Count |
|--------|-------|
| Build errors fixed | 3 |
| Files modified | 2 |
| Dependencies added | 1 (@types/react-portal) |
| Remaining issues | 0 |
Build Status: PASS: SUCCESS
| Error | Typical Fix |
|---|---|
'React' is not defined | Set "jsx": "react-jsx" in tsconfig (React 17+) |
Missing @types/react | npm i -D @types/react @types/react-dom |
Unexpected token '<' | Add @vitejs/plugin-react / babel-loader |
You're importing a component that needs useState (Next.js) | Add "use client" or move hook to a Client Component child |
Module not found: Can't resolve 'fs' (Next.js) | Remove fs import or move logic into Server Component / API route |
Hydration failed because the initial UI does not match | Move Date.now()/Math.random()/window.* to useEffect |
Invalid hook call | Multiple React copies — dedupe via resolutions/overrides |
Element type is invalid | Default vs named import mismatch |
// @ts-ignore without explanationThe agent will stop and report if:
/react-test — run tests after the build is green/react-review — review code quality after the build succeeds/build-fix — generic build fixer (non-React)verification-loop skill — full verification loopagents/react-build-resolver.mdskills/react-patterns/, skills/frontend-patterns/rules/react/coding-style.md, rules/react/patterns.mdnpx claudepluginhub affaan-m/ecc --plugin ecc/react-buildDiagnoses and incrementally fixes React build errors across Vite, webpack, Next.js, CRA, Parcel, esbuild, and Bun — JSX/TSX compilation, hydration mismatches, server/client component boundaries, and missing type declarations.
/build-fixIncrementally fixes TypeScript and build errors one at a time — parses error output, groups by file, applies fixes, re-runs build, and stops on new errors. Produces a summary of errors fixed and remaining.
/build-fixAutomatically fixes build errors (compilation, type, unresolved dependencies) by analyzing output, applying targeted fixes, and retrying up to 3 times.
/bugfixFixes frontend bugs via multi-layer detection (React/Vue/Angular), iterative sub-agent repairs with quality verification loops until 90% score or 3 max iterations.