amruthpillai/reactive-resume · error · Error

Unknown semantic element ${name}.

Error message

Unknown semantic element ${name}.

What it means

Thrown by compileSimple in the TypeSelector branch when the type name is not in the SEMANTIC_NODE_KINDS list (and is not the universal '*'). Only registered semantic element kinds like resume, page, section, item, etc. are valid type selectors.

Source

Thrown at packages/resume/src/stylesheet/selector.ts:183

	} else if (expression.type === "AnPlusB") {
		a = expression.a === null || expression.a === undefined ? 0 : Number(expression.a);
		b = expression.b === null || expression.b === undefined ? 0 : Number(expression.b);
		if (!Number.isInteger(a) || !Number.isInteger(b)) throw new Error(`Invalid :${name} expression.`);
	} else {
		throw new Error(`Unsupported :${name} expression.`);
	}

	if (name === "nth-of-type" && nth[0].selector) throw new Error(":nth-of-type does not accept an of selector.");
	const of = nth[0].selector ? compileSelectorList(nth[0].selector, { depth: context.depth + 1 }) : undefined;
	return { type: "pseudo", name, a, b, ...(of ? { of } : {}) };
}

function compileSimple(node: SelectorAst, context: CompileContext): CompiledSimpleSelector | null {
	switch (node.type) {
		case "TypeSelector": {
			const name = astName(node);
			if (name === "*") return { type: "universal" };
			if (!knownKinds.has(name)) throw new Error(`Unknown semantic element ${name}.`);
			return { type: "type", name: name as SemanticNode["kind"] };
		}
		case "IdSelector":
			return { type: "id", value: astName(node) };
		case "AttributeSelector": {
			const name = astName(node);
			if (!knownAttributes.has(name)) throw new Error(`Unknown semantic attribute ${name}.`);
			if (node.flags) throw new Error("Attribute selector flags are not supported.");
			const matcher = node.matcher as AttributeMatcher | null | undefined;
			if (matcher !== null && matcher !== undefined && !["=", "~=", "|=", "^=", "$=", "*="].includes(matcher)) {
				throw new Error(`Unsupported attribute matcher ${matcher}.`);
			}
			const value = attributeValue(node);
			if ((matcher === null || matcher === undefined) !== (value === null)) {
				throw new Error("Attribute selector matcher and value must be used together.");
			}
			return { type: "attribute", name, matcher: matcher ?? null, value };
		}

View on GitHub (pinned to 3a5b12e2a4)

Solutions

1. Replace the type with one from SEMANTIC_NODE_KINDS (resume, page, region, header, section, item, field, link, etc.).
2. Use the universal selector '*' if you genuinely mean any element.
3. Consult the SEMANTIC_NODE_KINDS export for the exhaustive list.

Example fix

// before
div > section
// after
region > section

import { SEMANTIC_NODE_KINDS } from '@reactive-resume/resume';

const KNOWN = new Set(SEMANTIC_NODE_KINDS);
const typeIsKnown = (name) => name === '*' || KNOWN.has(name);
// check each type selector token before compiling

const isRejected = (r) => r.selector === null && typeof r.error === 'string';

const result = compileSelector(selector);
if (result.selector === null && result.error.startsWith('Unknown semantic element ')) {
  suggestRegisteredKind(selector);
}

When it happens

Trigger: Writing div, span, unknown-element, or any HTML tag name that is not a registered semantic kind.

Common situations: Copying HTML tag selectors into resume semantic CSS; renaming a kind in the schema without updating CSS; using a kind from a different resume schema version.

Related errors

• Selector uses an unknown role.
• Attribute ${selector.name} is not available on ${type}.
• Unknown semantic attribute ${name}.
• :${name} does not accept arguments.
• Unsupported pseudo-class :${name}.

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