Module not found: Can't resolve '@shikijs/langs'

[mahoushoujoarale]

reproduction:

step1: install package

pnpm add streamdown-vue

step2: import package

<template>
        <StreamMarkdown class="prose" :content="text" />
</template>

<script setup lang="ts">
import { StreamMarkdown } from 'streamdown-vue';

const text = ref('');
</script>

@Saluana

[Saluana]

I will look into this today and get back to you.

Are You using Nuxt or just vue? Also if you could provide the version of vite and vue you are using that would be helpful.

[mahoushoujoarale]

I will look into this today and get back to you.

Are You using Nuxt or just vue? Also if you could provide the version of vite and vue you are using that would be helpful.

just vue, bundler: "@rsbuild/core": "1.6.7",

[mahoushoujoarale]

hi， @Saluana ，is there any progress now?

[Saluana]

Hey, @mahoushoujoarale

The error Module not found: Can't resolve '@shikijs/langs' occurs because of a mismatch between how the library handles @shikijs/langs imports and how some bundlers (like Rsbuild) resolve those imports.

The Problem

In src/shiki/register-default-languages.ts, the library uses two different import strategies:

1. CDN loaders for some languages (C++, Java, C, C#, PHP, Ruby, Kotlin, Swift, SQL) - these use createCdnLanguageLoader() which does a dynamic import from https://esm.sh/@shikijs/langs@3.12.1/es2022/ at runtime in the browser.

2. Direct local imports for other languages (TypeScript, JavaScript, JSON, etc.) - these use direct imports like import('@shikijs/langs/typescript').

In src/shiki/cdn.ts, the createCdnLanguageLoader() function has a fallback mechanism:

const local = () =>
    import(
        /* @vite-ignore */
        `@shikijs/langs/${specifier}`
    );
const remote = () =>
    import(
        /* webpackIgnore: true */
        /* @vite-ignore */
        `${SHIKI_CDN_BASE}${specifier}.mjs`
    );

The issue: Even though there are @vite-ignore and webpackIgnore: true comments, Rsbuild (and potentially other bundlers) are still analyzing the @shikijs/langs/${specifier} import at build time. The regex pattern in vite.config.ts marks @shikijs/langs/ as external:

external: [
    /^@shikijs\/langs\//,  // This regex doesn't match "@shikijs/langs" (base path)
]

But the dynamic import uses the template literal @shikijs/langs/${specifier}, which some bundlers may try to resolve statically as @shikijs/langs (without a subpath), which isn't explicitly externalized.

The Fix

There are two potential solutions:

1. Add @shikijs/langs (without trailing slash) to the externals - This ensures bundlers that analyze the base path don't try to resolve it.

2. Ensure the CDN loader's local fallback doesn't get analyzed - Improve the magic comments or restructure the code so bundlers completely ignore the local fallback path.

The recommended fix is to update vite.config.ts to explicitly include @shikijs/langs as an external:

external: [
    'vue',
    'mermaid',
    'katex',
    'shiki',
    /^shiki\//,
    '@shikijs/langs',        // Add this line
    /^@shikijs\/langs\//,
    '@shikijs/themes',       // Also add this for consistency
    /^@shikijs\/themes\//,
    // ... rest
],

Workaround

You may be able to work around this by explicitly installing @shikijs/langs as a direct dependency in your project:

pnpm add @shikijs/langs

This ensures the bundler (Rsbuild in their case) can resolve the @shikijs/langs imports that the CDN loader's local fallback references.

Alternative Workaround: Use the Core Entry

If you want to avoid the CDN loader mechanism entirely, you can import from streamdown-vue/core and register only the languages you need with direct imports:

<script setup lang="ts">
import { StreamMarkdown, registerShikiLanguages } from 'streamdown-vue/core';

// Register only the languages you need - these use direct imports
registerShikiLanguages([
    { id: 'typescript', loader: () => import('@shikijs/langs/typescript') },
    { id: 'javascript', loader: () => import('@shikijs/langs/javascript') },
    { id: 'json', loader: () => import('@shikijs/langs/json') },
    // Add others as needed
]);

const text = ref('');
</script>

<template>
    <StreamMarkdown class="prose" :content="text" />
</template>

This bypasses the CDN loaders (which use the problematic dynamic import pattern) and only registers languages with explicit subpath imports that Rsbuild can resolve properly.

I will work on implementing one of the proper solutions soon and get back to you. Hopefully you can use the workaround in the mean time