pbakaus/impeccable · error

variant_compile_failed

variant_compile_failed

Error message

variant_compile_failed

What it means

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.

Source

Thrown at skill/scripts/live-server.mjs:1376

        id: msg.id,
      }));
      return;
    }
    const replyFileMeta = sessionFileMetadataFromPollReply(msg.file);
    // A publish (done reply carrying a component manifest) snapshots the
    // variant files into a fresh revision dir before the browser is told:
    // the import path changes every publish, so no transform cache can pin a
    // stale compile of a republished module (node_modules is unwatched).
    // Broken variants are bounced HERE, before the browser imports anything:
    // a compile error that reaches the page is a red overlay in the user's
    // face; bounced at publish it is a private fix with file and line.
    if (replyFileMeta.previewMode === 'svelte-component'
        && msg.id
        && (msg.type === 'done' || !msg.type)) {
      let compileCheck = { ok: true, failures: [] };
      try { compileCheck = compileCheckVariants(msg.id, process.cwd()); } catch { /* best-effort */ }
      if (!compileCheck.ok) {
        res.writeHead(422, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({
          error: 'variant_compile_failed',
          id: msg.id,
          failures: compileCheck.failures,
          _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.',
        }));
        return;
      }
      try { bumpSvelteComponentPreviewRevision(msg.id, process.cwd()); } catch { /* best-effort */ }
    }
    if (state.sessionStore && msg.id && !skipJournalReply) {
      try {
        const eventType = msg.type === 'steer_done'
          ? 'steer_done'
          : msg.type === 'discard' || msg.type === 'discarded'
            ? 'discarded'
            : msg.type === 'complete'
              ? 'complete'

View on GitHub (pinned to f88b2837a7)

Solutions

1. Read each entry in failures[] and fix the exact file:line it names
2. If the failure is a duplicate <style>, merge all rules into the component's single existing <style> block
3. Resend the identical --reply done — the publish is idempotent and only blocked on compile success
4. Do not edit the revision dir blindly; the fix belongs in the variant source the agent wrote

Example fix

<!-- before: two top-level style blocks -->
<div>...</div>
<style> .a { color: red; } </style>
<style> .b { margin: 0; } </style>
<!-- after: one merged block -->
<div>...</div>
<style> .a { color: red; } .b { margin: 0; } </style>

// Compile-check every variant file before replying done (mirrors server check)
import { compile } from 'svelte/compiler';
import { readFileSync } from 'node:fs';
const failures = variantFiles.filter((f) => {
  try { compile(readFileSync(f, 'utf-8'), { filename: f }); return false; } catch (e) { console.error(f, e.message); return true; }
});
if (failures.length) process.exit(1); // fix before sending done

When it happens

Trigger: 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>.

Common situations: 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.

Related errors

• No painted ancestor for Svelte shader proxy
• [impeccable] Svelte component abort cleanup failed:
• [impeccable] Svelte component reset cleanup failed:
• [impeccable] Could not find original element in live DOM.

AI-assisted analysis of pbakaus/impeccable@f88b2837a7 (2026-08-18). Data as JSON: /api/errors/842ff04abe1832c6. Report an issue: GitHub.