withastro/astro · warning

Unable to load the language: ${lang}

Error message

Unable to load the language: ${lang}

What it means

astro-prism highlights fenced code blocks during static generation using Prism. After attempting to load the requested language id (including the markup-templating dependency Prism expects), if `Prism.languages[lang]` is still undefined it warns 'Unable to load the language' and emits the code unhighlighted — wrapped only in the language class. Markdown rendering continues; only syntax coloring is lost.

Source

Thrown at packages/astro-prism/src/highlighter.ts:29

	let classLanguage = `language-${lang}`;
	const ensureLoaded = async (language: string) => {
		if (language && !Prism.languages[language]) {
			await loadLanguages([language]);
		}
	};

	if (languageMap.has(lang)) {
		await ensureLoaded(languageMap.get(lang)!);
	} else if (lang === 'astro') {
		await ensureLoaded('typescript');
		addAstro(Prism);
	} else {
		await ensureLoaded('markup-templating'); // Prism expects this to exist for a number of other langs
		await ensureLoaded(lang);
	}

	if (lang && !Prism.languages[lang]) {
		console.warn(`Unable to load the language: ${lang}`);
	}

	const grammar = Prism.languages[lang];
	let html = code;
	if (grammar) {
		html = Prism.highlight(code, grammar, lang);
	}

	return { classLanguage, html };
}

View on GitHub (pinned to 52e6c34790)

Solutions

  1. Use a valid Prism language id or alias (ts, js, sh, yaml) in the fence
  2. Register a custom grammar on `Prism.languages.mylang` before rendering if you need highlighting for a DSL
  3. Accept plain output if the language genuinely has no grammar — nothing else breaks

Example fix

// before
```myquery
SELECT 1;
```

// after (grammar exists in Prism)
```sql
SELECT 1;
```
Defensive patterns

Strategy: type-guard

Validate before calling

// Before rendering, check the fence language is a loaded Prism grammar
import Prism from 'prismjs';
const lang = fenceInfo.language;
if (!(lang in Prism.languages)) {
  return renderPlain(code); // skip highlighting instead of warning per build
}

Type guard

import type Prism from 'prismjs';
const isPrismLanguage = (lang: string): lang is keyof typeof Prism.languages =>
  lang !== 'extend' && lang !== 'insertBefore' && lang !== 'DFS' && lang in Prism.languages;

Prevention

When it happens

Trigger: A fenced block with a language id that is not a Prism language (typo like ```javscipt, a custom DSL like ```mylang), or an id not shipped in the prismjs components the project bundles.

Common situations: Docs sites with custom fence languages; simple typos in language tags; niche languages without a Prism grammar.

Related errors


AI-assisted analysis of withastro/astro@52e6c34790 (2026-08-18). Data as JSON: /api/errors/7c70711649433b47. Report an issue: GitHub.