When builds fail: auto-fix
When generated code has broken syntax, bad imports, or misplaced React hooks, MaShop runs an auto-fix pass that validates the code and repairs the errors before it lands in your repo.
How-to: trigger the auto-fix pass and read its result.
When generated code has a broken brace, a forbidden import, or a React hook in the wrong place, MaShop runs an auto-fix pass that validates the code and repairs the errors before the file lands in your repo. This page shows what that pass checks, how to trigger it, and what each result means.
What the auto-fix pass does
The pass runs in two phases. The first phase is a fast static check with no AI call. The second phase calls the AI (your prompts never feed OpenAI or Anthropic) to repair the code, and only when the static check finds errors that need fixing.
- Static validation. MaShop scans the code line by line for forbidden patterns, missing required patterns, React hook rule violations, unbalanced JSX tags, and deprecated APIs. This runs every time and costs nothing.
- AI repair. If the static check found at least one error (not only warnings), MaShop sends the code plus the numbered issue list to the model. The model returns the fixed code with the original design intent preserved.
- Re-validation. MaShop runs a structural syntax check on the model's output, then re-runs static validation. If errors remain, it retries. The repair loop runs up to 2 attempts.
Fix only, never refactor
The fixer is told to fix only the reported issues and to preserve every Tailwind class, animation, and visual detail exactly. It does not restyle, refactor, or add features, and it does not add comments explaining its changes.
What the static check catches
The static validator (validateCode) flags each issue with a severity of error or warning and a category of syntax, runtime, or dependency. Errors trigger the AI repair phase. Warnings do not.
Errors (these get repaired)
- No exported component. A component file with no
export default functionfails with "No exported component function found". - Hardcoded currency. A literal currency symbol next to a number (
$,€,£,¥,FCFA, orCFAfollowed by a digit) is flagged. The fix reads the currency from settings or a store prop instead. - Invalid component import. Any import from
@/app/components/other thanIconlyProis rejected. - React hook inside a condition. A
useState,useEffect,useCallback,useMemo, oruseRefcall inside anif,for,while, orswitchblock fails with "React hook called inside a conditional block". - Unbalanced JSX. A tag whose open and close counts differ fails with "Unbalanced JSX tag: N opening, M closing".
Warnings (flagged, not repaired)
- dangerouslySetInnerHTML. Flagged as a potential XSS risk with an accessibility-category warning.
- Missing 'use client'. A file that uses React hooks but does not start with
'use client'gets a warning to add the directive. - Deprecated APIs. See the next section.
Warnings alone do not call the model
If the only findings are warnings, the pass returns the code unchanged with the message "N warning(s) detected but no errors to fix". No AI call happens and nothing is billed for a repair.
Deprecated patterns it surfaces
The pass also scans for old framework APIs and reports each as a deprecation warning with a modern alternative. These do not block, but they tell you what to upgrade.
| Deprecated | Suggested replacement |
|---|---|
getServerSideProps, getStaticProps | async Server Components with direct data fetching |
getStaticPaths | generateStaticParams() |
next/router | next/navigation (useRouter, usePathname, useSearchParams) |
next/head | the metadata export or generateMetadata() |
React.FC, React.FunctionComponent | plain typed function declarations |
React.forwardRef | pass ref as a regular prop (React 19) |
PropTypes | TypeScript interfaces and types |
as any | specific type assertions or unknown with guards |
@ts-ignore | @ts-expect-error |
Tailwind purge: | the content option |
How to trigger it
Automatically, after a generation
You do not have to ask. When the builder generates or rebuilds your site, MaShop runs the auto-fix pass on the generated preview code on its own. It applies the fixed code only when the pass actually changed something (when at least one issue was fixed), then commits the result to your repo.
By asking in chat
Ask the builder to check or repair the code and it calls the auto_fix_code tool. The builder's own guidance is to reach for this tool after generating code when quality matters. Plain-language prompts that trigger it:
Fix the broken code on the products page.
Validate the homepage component before we deploy.
Something is off with the cart, can you repair it?The tool takes the code to repair and an autoFix flag that defaults to true. With autoFix false, it runs validate-only mode: it returns how many issues it found and the first 10 of them, without changing anything. A repair run costs 2 credits on top of the model tokens used.
What the result tells you
- Clean. "No issues found, code passed validation" means the static check found nothing and no repair ran.
- Repaired. You get the count of
issuesFound, the count ofissuesFixed, and a one-line summary of what changed. - Partially repaired. If errors survive the fix, the summary ends with "(N issue(s) remain after fix)". The pass made progress but could not clear everything in its attempts.
- Failed. If the model returns structurally broken code, the pass rejects it with "CodeFixer produced invalid code:" followed by the structural reason, for example "Unbalanced braces" or "No export statement found". Your existing code is left untouched.
When auto-fix cannot finish
The repair loop is bounded to 2 attempts. If the code still fails its structural check after the loop, the pass returns the failure instead of committing bad code. When that happens, give the builder a more specific prompt about the broken section, or open version history to restore a working snapshot, then regenerate.
Where this fits
Auto-fix is the repair step inside a generation, not a deploy step. It runs on the React and TSX the builder writes, before those files reach your repo. To understand the generation loop it sits inside, read how it works. To recover an earlier working state when a fix cannot land, see versions. For what happens at deploy time, see deploy overview.