{"record":{"id":"842ff04abe1832c6","repo":"pbakaus/impeccable","slug":"variant-compile-failed","errorCode":"variant_compile_failed","errorMessage":"variant_compile_failed","messagePattern":"variant_compile_failed","errorType":"http","errorClass":null,"httpStatus":422,"severity":"error","filePath":"skill/scripts/live-server.mjs","lineNumber":1376,"sourceCode":"        id: msg.id,\n      }));\n      return;\n    }\n    const replyFileMeta = sessionFileMetadataFromPollReply(msg.file);\n    // A publish (done reply carrying a component manifest) snapshots the\n    // variant files into a fresh revision dir before the browser is told:\n    // the import path changes every publish, so no transform cache can pin a\n    // stale compile of a republished module (node_modules is unwatched).\n    // Broken variants are bounced HERE, before the browser imports anything:\n    // a compile error that reaches the page is a red overlay in the user's\n    // face; bounced at publish it is a private fix with file and line.\n    if (replyFileMeta.previewMode === 'svelte-component'\n        && msg.id\n        && (msg.type === 'done' || !msg.type)) {\n      let compileCheck = { ok: true, failures: [] };\n      try { compileCheck = compileCheckVariants(msg.id, process.cwd()); } catch { /* best-effort */ }\n      if (!compileCheck.ok) {\n        res.writeHead(422, { 'Content-Type': 'application/json' });\n        res.end(JSON.stringify({\n          error: 'variant_compile_failed',\n          id: msg.id,\n          failures: compileCheck.failures,\n          _instructions: 'The publish was NOT delivered: the listed variant file(s) do not compile, so the browser never saw them. Fix each failure at the given file and line (the most common cause is a second top-level <style> element; Svelte allows exactly one, so merge all rules into the existing block), then send the same --reply done again.',\n        }));\n        return;\n      }\n      try { bumpSvelteComponentPreviewRevision(msg.id, process.cwd()); } catch { /* best-effort */ }\n    }\n    if (state.sessionStore && msg.id && !skipJournalReply) {\n      try {\n        const eventType = msg.type === 'steer_done'\n          ? 'steer_done'\n          : msg.type === 'discard' || msg.type === 'discarded'\n            ? 'discarded'\n            : msg.type === 'complete'\n              ? 'complete'","sourceCodeStart":1358,"sourceCodeEnd":1394,"githubUrl":"https://github.com/pbakaus/impeccable/blob/f88b2837a7d7c3182e46307bbbb091a1ed547571/skill/scripts/live-server.mjs#L1358-L1394","documentation":"For svelte-component preview sessions, the server copies variant files into a fresh revision dir and compile-checks every one of them before the browser is told a publish exists. If any variant fails to compile, the publish is bounced with HTTP 422 listing per-file failures (file + line); the browser never imports the broken module, so the user never sees a red overlay. The documented most common cause is a second top-level <style> element — Svelte allows exactly one per component.","triggerScenarios":"Replying done on a svelte-component event where a variant file has a compile error: two top-level <style> blocks, unclosed tags, invalid Svelte syntax, or a JS syntax error inside <script>.","commonSituations":"The agent 'merges' CSS by appending a new <style> block instead of merging rules into the existing one; hand-edited variant files under the session's revision dir; a republished variant that no longer matches the compile API used by the checker.","solutions":["Read each entry in failures[] and fix the exact file:line it names","If the failure is a duplicate <style>, merge all rules into the component's single existing <style> block","Resend the identical --reply done — the publish is idempotent and only blocked on compile success","Do not edit the revision dir blindly; the fix belongs in the variant source the agent wrote"],"exampleFix":"<!-- before: two top-level style blocks -->\n<div>...</div>\n<style> .a { color: red; } </style>\n<style> .b { margin: 0; } </style>\n<!-- after: one merged block -->\n<div>...</div>\n<style> .a { color: red; } .b { margin: 0; } </style>","handlingStrategy":"validation","validationCode":"// Compile-check every variant file before replying done (mirrors server check)\nimport { compile } from 'svelte/compiler';\nimport { readFileSync } from 'node:fs';\nconst failures = variantFiles.filter((f) => {\n  try { compile(readFileSync(f, 'utf-8'), { filename: f }); return false; } catch (e) { console.error(f, e.message); return true; }\n});\nif (failures.length) process.exit(1); // fix before sending done","typeGuard":null,"tryCatchPattern":null,"preventionTips":["One component, one top-level <style>: merge CSS additions into the existing block, never append a second","Run the same Svelte version locally as the preview checker","Treat the 422 failures list as the authoritative fix list before resending the identical reply"],"tags":["svelte","compile-error","variant-preview","http-422"],"backgroundTag":"svelte-compile-error","analyzedSha":"f88b2837a7d7c3182e46307bbbb091a1ed547571","analyzedAt":"2026-08-18T04:58:36.608Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}