Astro: "Language does not exist" error

Problem

You might encounter Language does not exist or Unable to load the language errors in console when working on your Astro site. It might look like this in your terminal:

15:48 [astro] Server started                               800ms
15:48 [astro] Local: http://localhost:3000/
15:49 [astro] 200 /                                        897ms
15:49 [astro] 200 /                                        208ms
15:49 [astro] 200 /                                        7ms
15:49 [astro] 200 /blog/                                   1604ms
Language does not exist: vue
Unable to load the language: vue
15:49 [astro] 200 /blog/                                   235ms
Language does not exist: vue
Unable to load the language: vue
15:49 [astro] 200 /blog/post/using-vue-components-inside-astro/ 151ms

Explanation

While it’s not clear from the error text, this error is not directly related to Astro. It’s coming from the Prism plugin for Remark ↗. Prism is the syntax highlighting engine and Remark is a library that adds plugin support for markdown files.

Simply put, the error means that the syntax in question is not supported by Prism.

For example, if you have a code snippet like that in your file:

‛‛‛vue
<template>
  <div>Demo</div>
</template>

<script setup lang="ts">
</script>
‛‛‛

It will lead to Language does not exist: vue error.

Solution

Make sure your syntax highlighting labels are valid. If you still get that issue, it means that Prism doesn’t support that syntax yet. In that case, you may want to use a similar syntax. For example, you can use html instead of vue or svelte, and tsx/jsx instead of react.

Here’s the list ↗ of all syntaxes supported by Prism.