Svelte-i18n运行报错：JSON文件冒号位置出现意外token如何解决

报错根因 #

该JSON语法报错本质是项目的构建工具未正确配置JSON解析能力，将JSON内容当作JavaScript代码解析，因此遇到JSON中的冒号时抛出unexpected token异常，与JSON文件本身的格式合规性无关。

排查解决步骤 #

• 调整TS配置
  由于你的App.svelte声明了lang="ts"，项目启用了TypeScript，需要先确认根目录tsconfig.json的compilerOptions字段开启以下配置：

  {
    "compilerOptions": {
      "resolveJsonModule": true,
      "esModuleInterop": true
    }
  }
  

  这两项是TypeScript支持JSON文件导入的必要配置，缺失就会触发JSON解析异常。
• 补充构建工具的JSON解析插件
  • 若项目使用Vite构建：Vite默认支持JSON导入，无需额外插件，可检查vite.config.js/ts中是否存在错误的资源拦截规则，把JSON文件排除到了正常解析流程外。
  • 若项目使用Rollup构建：需要手动安装JSON解析插件，首先执行依赖安装命令：

    npm install @rollup/plugin-json --save-dev
    

    之后在rollup.config.js的插件数组中新增配置：

    import json from '@rollup/plugin-json';
    
    export default {
      // 其余原有配置
      plugins: [json(), /* 其余原有插件 */]
    }
    

• 验证路径与文件格式
  确认i18n.js中导入的./locales/en.json路径与实际文件存放路径完全匹配，文件后缀为.json，且文件存储格式为UTF-8无BOM格式。
• 快速定位验证
  可临时将JSON导入替换为直接声明JS对象，确认是否为JSON导入链路的问题：

  // 替换 import en from "./locales/en.json" 为以下代码
  const en = {
    "header.title": "Title"
  }
  

  替换后无报错即可完全确认是JSON解析配置问题，按前序步骤调整即可。

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