WhatIfWeDigDeeper Fix Build Errors
Systematically diagnose and fix build, TypeScript, or compilation errors.
Process
1. Identify the Problem
If no specific error provided, run:
npm run build 2>&1
Capture and parse error output.
2. Categorize Errors
| Type | Pattern | Common Fix |
|---|---|---|
| Type error | Type 'X' is not assignable |
Fix type mismatch |
| Missing module | Cannot find module |
Install dep or fix import path |
| Missing export | has no exported member |
Check export statement |
| Syntax error | Unexpected token |
Fix syntax |
| JSX error | Cannot use JSX |
Check tsconfig jsx setting |
3. Analyze Each Error
For each error:
- Read the file at the specified line
- Understand the context (what the code is trying to do)
- Identify root cause (not just symptom)
4. Apply Fixes
Fix errors in dependency order:
- Import/module errors first (they cause cascading errors)
- Type definition errors
- Implementation errors
5. Verify
npm run build
If new errors appear, repeat. Continue until build passes.
6. Run Full Validation
npm run lint
npm test
Ensure fixes didn't break anything else.
Common Fixes
Missing types:
npm install -D @types/[package]
Path alias issues:
Check tsconfig.json paths configuration.
React component type errors:
// Add proper typing
const Component: React.FC<Props> = ({ prop }) => { ... }
Async/await issues:
Ensure function is marked async and return type includes Promise.