SvelteKit使用mdsvex动态加载Markdown文件时导入报错如何解决

问题原因 #

1. Vite的动态导入不支持完全无静态上下文的路径拼接，直接使用../../posts/${page.params.slug}.md这类纯动态模板字符串时，Vite在预构建阶段无法识别出需要把src/posts目录下的所有.md文件纳入编译范围。
2. mdsvex仅会处理被明确标记为导入目标的.md文件，缺失静态路径提示时，你的.md文件不会被转译为可加载的Svelte组件，SSR阶段就会抛出模块找不到的错误。

修复方案 #

推荐使用import.meta.glob预先导入所有文章目录下的md文件，给Vite明确的文件扫描范围，修改后的[slug].svelte代码如下：

// src/routes/posts/[slug].svelte
<script context="module">
  // 预先声明导入posts目录下所有.md文件，Vite会自动扫描纳入编译
  const postModules = import.meta.glob('../../posts/*.md');

  export async function load({ page }) {
    const slug = page.params.slug;
    const targetModulePath = `../../posts/${slug}.md`;
    // 校验文章是否存在，不存在直接返回404
    if (!postModules[targetModulePath]) {
      return {
        status: 404,
        error: new Error('文章不存在')
      };
    }
    const Post = (await postModules[targetModulePath]()).default;
    return {
      props: { Post }
    };
  }
</script>

<script>
  export let Post;
</script>

<Post />

如果修改后仍有问题，请检查svelte.config.js中是否正确配置了mdsvex的扩展名识别：

// svelte.config.js
import { mdsvex } from 'mdsvex';

const config = {
  // 同时识别.svelte和.md后缀文件
  extensions: ['.svelte', '.md'],
  preprocess: [
    mdsvex({
      extensions: ['.md']
    })
  ],
  // 其余原有配置保持不变
};

export default config;

内容的提问来源于stack exchange，提问作者Moshe