🐛 Bugfix: Why did the Vitto Studio Live Preview fail with SWC 'Unexpec...

Date: 2026-03-27
Time: 12:50:45 UTC
Session: gspace1-271.5
Agent: angular
Confidence: 99%
Status: ✅ Documented

📋 Decision Context

Question:

Why did the Vitto Studio Live Preview fail with SWC 'Unexpected token ,' on LLM-generated Angular component imports?

Task: S271: Fix Live Preview SWC compilation failure on LLM-generated code

🎯 Decision Made

Chosen:

Strip trailing commas from captured import groups in injectCustomElementsSchema() (now injectNoErrorsSchema() in source-transforms.ts) before appending ', NO_ERRORS_SCHEMA'. Single-line fix: .replace(/,\\s*$/, '') added to the cleaned imports string.

Options Considered:

1. Strip trailing comma before appending (chosen — minimal, targeted, proven)
2. Parse imports with AST instead of regex (overkill for preview context)
3. Add general sanitizeImports pass (broader but slower)
4. Fix the LLM prompt to not generate trailing commas (unreliable — LLM behavior is non-deterministic)

💭 Reasoning

Root cause chain: (1) LLM generates multiline import like import { Component, DestroyRef,\n} from '@angular/core'. (2) The enrichment pipeline's injectCustomElementsSchema() captures content between { and }, collapses whitespace to a single line with .replace(/\\s+/g, ' ').trim(), producing Component, DestroyRef, (trailing comma preserved because trim() only removes whitespace, not punctuation). (3) Function appends , NO_ERRORS_SCHEMA producing Component, DestroyRef,, NO_ERRORS_SCHEMA (double comma). (4) rspack's built-in SWC loader rejects ,, as 'Unexpected token ",". Expected identifier or string' at the component file line 1. (5) SWC failure prevents the entire component from compiling, causing Live Preview to show 'Compilation Failed'. The fix is minimal and targeted: strip trailing comma from the captured group before appending. This is the ONLY function in the enrichment pipeline that appends to existing import statements — all other enrichment functions either generate new files or remove imports entirely. The function was subsequently extracted to enrichment/source-transforms.ts as part of the bundler-filesystem decomposition.

📁 Files Involved

• libs/libs-structural/platform-preview/src/lib/enrichment/source-transforms.ts
• libs/libs-structural/platform-preview/src/lib/services/bundler-filesystem.service.ts

🔗 Related

• Decision ID: dev_1774615841778_k5jgz8i
• Session: 271
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation