withastro/astro · warning

Prism TypeScript language not loaded, Astro scripts will be

Error message

Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.

What it means

astro-prism builds the `astro` grammar by cloning an existing script grammar (addAstro). If Prism's TypeScript grammar is not loaded at that moment, it clones JavaScript instead and warns that Astro scripts will be treated as JavaScript. Highlighting still works; TS-specific tokens such as type annotations and generics just lose fidelity.

Source

Thrown at packages/astro-prism/src/plugin.ts:11

export function addAstro(Prism: typeof import('prismjs')) {
	if (Prism.languages.astro) {
		return;
	}

	let scriptLang: string;
	if (Prism.languages.typescript) {
		scriptLang = 'typescript';
	} else {
		scriptLang = 'javascript';
		console.warn(
			'Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.',
		);
	}

	let script = Prism.util.clone(Prism.languages[scriptLang]);

	// eslint-disable-next-line regexp/no-useless-assertions
	let space = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source;
	let braces = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source;
	let spread = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;

	function re(source: string, flags?: string) {
		source = source
			.replace(/<S>/g, function () {
				return space;
			})
			.replace(/<BRACES>/g, function () {
				return braces;

View on GitHub (pinned to 52e6c34790)

Solutions

1. Import 'prismjs/components/prism-typescript' (or ensure it loads) before astro blocks render
2. Include typescript in your languages list so it loads before the astro grammar is built
3. Quick check in a scratch script: `console.log(!!Prism.languages.typescript)` should be true before highlighting

Example fix

// before: TS grammar missing, astro cloned from JS
import Prism from 'prismjs';
addAstro(Prism);

// after
import Prism from 'prismjs';
import 'prismjs/components/prism-typescript';
addAstro(Prism);

// Guarantee the TS grammar exists before the astro grammar is built
import Prism from 'prismjs';
if (!Prism.languages.typescript) {
  await import('prismjs/components/prism-typescript');
}
addAstro(Prism);

const hasTypescriptGrammar = (P: typeof import('prismjs')): boolean =>
  'typescript' in P.languages;

When it happens

Trigger: Highlighting an ```astro fence with a prismjs build that lacks the typescript component; calling `addAstro(Prism)` manually before typescript is loaded; bundler tree-shaking dropping the typescript component from a CDN-style prism import.

Common situations: Custom prism setups via CDN core builds; import ordering issues in custom highlighters; framework integrations loading prism selectively.

Related errors

• Unable to load the language: ${lang}
• Language does not exist: ${lang}
• Integration ${colors.bold(integrationName)} is injecting a t
• Shiki syntax highlighting uses inline styles that are not co
• [Shiki] The language ${langStr} doesn't exist, falling back

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