amruthpillai/reactive-resume · error · Error

The semantic stylesheet could not be rendered.

Error message

The semantic stylesheet could not be rendered.

What it means

Thrown by createResumePdfBlob (browser adapter) when createResumePdfBlobResult returns ok:false, which happens when hasSemanticErrors(resolvedInspection) is true — i.e. the resume's semantic stylesheet produced at least one diagnostic with severity 'error' during compileStylesheet/resolveStylesheet. The thrown Error includes a `cause` field holding the diagnostics array (SemanticCssDiagnostic[]), so callers can inspect specific failures. This is the browser-side entry point used by the web preview/export.

Source

Thrown at packages/pdf/src/browser.tsx:77

	...options
}: CreateResumePdfBlobResultOptions): Promise<ResumePdfRenderResult<Blob>> => {
	const normalizedOptions = { ...options, data: parseResumeData(options.data) };
	const resolvedInspection = inspection ?? inspectResumePdf(normalizedOptions);
	if (hasSemanticErrors(resolvedInspection)) {
		return { ok: false, diagnostics: resolvedInspection.diagnostics };
	}

	return {
		ok: true,
		value: await renderResumePdfBlob(normalizedOptions),
		diagnostics: resolvedInspection.diagnostics,
	};
};

export const createResumePdfBlob = async (options: CreateResumePdfBlobOptions): Promise<Blob> => {
	const result = await createResumePdfBlobResult(options);
	if (!result.ok) {
		throw new Error("The semantic stylesheet could not be rendered.", { cause: result.diagnostics });
	}
	return result.value;
};

View on GitHub (pinned to 3a5b12e2a4)

Solutions

1. Call createResumePdfBlobResult instead and inspect the returned `diagnostics` array to find the specific error-level diagnostic(s) (each has severity, message, and location).
2. Fix the offending rule(s) in the semantic stylesheet source (data.metadata.stylesheet.applied.text) based on the diagnostic messages, then retry.
3. If you do not need the throw, use the Result-style API (createResumePdfBlobResult) which returns { ok:false, diagnostics } instead of throwing, and degrade gracefully.
4. Temporarily switch the resume's stylesheet mode back to 'legacy' (data.metadata.stylesheet.mode) to unblock export while the semantic CSS is repaired.

Example fix

// before: throws, loses diagnostics detail
try {
  const blob = await createResumePdfBlob({ data });
} catch (e) {
  console.error(e.cause); // diagnostics array, but flow interrupted
}

// after: use the Result API to inspect diagnostics before deciding
const result = await createResumePdfBlobResult({ data });
if (!result.ok) {
  for (const d of result.diagnostics) {
    if (d.severity === 'error') console.error(d.message, d.location);
  }
  return;
}
const blob = result.value;

import { inspectResumePdf, hasSemanticErrors } from '@reactive-resume/pdf/browser';

const inspection = inspectResumePdf({ data });
if (hasSemanticErrors(inspection)) {
  // show inspection.diagnostics to the user; do not call createResumePdfBlob
  for (const d of inspection.diagnostics) console.warn(d.message);
}

import type { ResumePdfRenderResult } from '@reactive-resume/pdf/semantic';
function isOk<T>(r: ResumePdfRenderResult<T>): r is Extract<ResumePdfRenderResult<T>, { ok: true }> {
  return r.ok;
}

import { createResumePdfBlobResult } from '@reactive-resume/pdf/browser';

const result = await createResumePdfBlobResult({ data });
if (!result.ok) {
  // result.diagnostics contains the error-level diagnostics
  handleDiagnostics(result.diagnostics);
  return;
}
const blob = result.value;

When it happens

Trigger: Calling createResumePdfBlob with resume data whose metadata.stylesheet.mode is 'semantic' and whose authored CSS contains an error-level diagnostic (unknown element, invalid attribute, malformed selector, unsupported property, etc.). Also when a publicStyleProjection fails to compile. The preflight in inspectResumePdf runs synchronously before any PDF bytes are produced, so the throw happens before rendering.

Common situations: User-authored semantic CSS with a typo or unsupported construct. A template/stylesheet migration that introduced an invalid rule. Programmatic resume data with a stylesheet.applied payload that doesn't compile. Switching a resume from 'legacy' to 'semantic' mode without fixing pre-existing CSS errors.

Related errors

• The semantic stylesheet could not be rendered.
• Applied semantic stylesheet cannot be projected
• Application documents must be PDF files.
• Unauthorized
• Public style projection does not match the resume render dat

AI-assisted analysis of amruthpillai/reactive-resume@3a5b12e2a4 (2026-08-12). Data as JSON: /api/errors/c9a76d2ddca4d95c. Report an issue: GitHub.