{"record":{"id":"cf348c6a71b4fa81","repo":"withastro/astro","slug":"prism-typescript-language-not-loaded-astro-script","errorCode":null,"errorMessage":"Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.","messagePattern":"Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/astro-prism/src/plugin.ts","lineNumber":11,"sourceCode":"export function addAstro(Prism: typeof import('prismjs')) {\n\tif (Prism.languages.astro) {\n\t\treturn;\n\t}\n\n\tlet scriptLang: string;\n\tif (Prism.languages.typescript) {\n\t\tscriptLang = 'typescript';\n\t} else {\n\t\tscriptLang = 'javascript';\n\t\tconsole.warn(\n\t\t\t'Prism TypeScript language not loaded, Astro scripts will be treated as JavaScript.',\n\t\t);\n\t}\n\n\tlet script = Prism.util.clone(Prism.languages[scriptLang]);\n\n\t// eslint-disable-next-line regexp/no-useless-assertions\n\tlet space = /(?:\\s|\\/\\/.*(?!.)|\\/\\*(?:[^*]|\\*(?!\\/))\\*\\/)/.source;\n\tlet braces = /(?:\\{(?:\\{(?:\\{[^{}]*\\}|[^{}])*\\}|[^{}])*\\})/.source;\n\tlet spread = /(?:\\{<S>*\\.{3}(?:[^{}]|<BRACES>)*\\})/.source;\n\n\tfunction re(source: string, flags?: string) {\n\t\tsource = source\n\t\t\t.replace(/<S>/g, function () {\n\t\t\t\treturn space;\n\t\t\t})\n\t\t\t.replace(/<BRACES>/g, function () {\n\t\t\t\treturn braces;","sourceCodeStart":1,"sourceCodeEnd":29,"githubUrl":"https://github.com/withastro/astro/blob/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/astro-prism/src/plugin.ts#L1-L29","documentation":"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.","triggerScenarios":"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.","commonSituations":"Custom prism setups via CDN core builds; import ordering issues in custom highlighters; framework integrations loading prism selectively.","solutions":["Import 'prismjs/components/prism-typescript' (or ensure it loads) before astro blocks render","Include typescript in your languages list so it loads before the astro grammar is built","Quick check in a scratch script: `console.log(!!Prism.languages.typescript)` should be true before highlighting"],"exampleFix":"// before: TS grammar missing, astro cloned from JS\nimport Prism from 'prismjs';\naddAstro(Prism);\n\n// after\nimport Prism from 'prismjs';\nimport 'prismjs/components/prism-typescript';\naddAstro(Prism);","handlingStrategy":"type-guard","validationCode":"// Guarantee the TS grammar exists before the astro grammar is built\nimport Prism from 'prismjs';\nif (!Prism.languages.typescript) {\n  await import('prismjs/components/prism-typescript');\n}\naddAstro(Prism);","typeGuard":"const hasTypescriptGrammar = (P: typeof import('prismjs')): boolean =>\n  'typescript' in P.languages;","tryCatchPattern":null,"preventionTips":["Load prism-typescript in the same module that loads prism core","Watch for this warning after bundler changes — tree-shaking can drop component imports","Smoke-test highlighting of an astro block in CI and diff the output HTML for class='token'"],"tags":["prism","astro-grammar","typescript","syntax-highlighting"],"backgroundTag":"prism-grammar-missing","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}