SvelteKit加载.md文件报错：Unexpected token < in JSON

核心原因 #

「Unexpected token <」错误本质是fetch请求返回了HTML页面（大概率是404页面），而非预期的JSON数据——说明请求路径不正确，SvelteKit没正确路由到index.json.ts这个API端点，自然也不会执行里面的console.log。

修正步骤 #

1. 明确API端点的路由路径
   SvelteKit中，/routes/jobs/index.json.ts对应的实际API路径是/jobs.json，而非文件系统的相对路径./index.json。路由规则是：同目录下的[name].json.ts对应/父路径/name.json的API端点。

2. 修改load函数的fetch路径
   把+page.js里的请求路径改成根相对路径：

// /routes/jobs/+page.js
export async function load({ fetch }) {
  const res = await fetch('/jobs.json');
  const posts = await res.json();
  return { posts };
}

3. 确保index.json.ts符合API路由规范
   必须导出GET（或对应HTTP方法）函数，SvelteKit才会将其识别为API端点，示例代码：

// /routes/jobs/index.json.ts
export async function GET() {
  // 加载posts目录下的md文件
  const postModules = import.meta.glob('./posts/*.md');
  console.log('已加载的md文件:', postModules);

  // 解析md文件的元数据或内容
  const postData = await Promise.all(
    Object.entries(postModules).map(async ([filePath, resolver]) => {
      const { metadata, default: content } = await resolver();
      return {
        slug: filePath.replace('./posts/', '').replace('.md', ''),
        metadata,
        content
      };
    })
  );

  // 返回JSON响应
  return new Response(JSON.stringify(postData), {
    headers: { 'Content-Type': 'application/json' }
  });
}

4. 核对文件结构
   确认你的目录结构符合要求：

routes/
  jobs/
    +page.js
    index.json.ts
    posts/
      post-1.md
      post-2.md

补充说明 #

SvelteKit load函数中的fetch是遵循应用路由规则的「伪fetch」，它映射的是路由路径而非文件系统路径，所以不能直接用文件相对路径请求API端点。

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