使用JSON.parse()解析导入的JSON文件时触发TypeError错误的问询

问题场景 #

我的club.json数据如下：

{
  "cId-0-001": {
    "profile": {
      "name": "Cousin's Bookclub",
      "image": "/public/images/clubs/cId0-001-main.jpeg"
    },
    "members": ["uId-0-001", "uId-0-002"]
  }
}

我用以下代码导入并尝试解析：

import * as clubDatabase from "../../database/clubs.json";
JSON.parse(clubDatabase)

运行时报错：TypeError: Cannot convert object to primitive value，已确认JSON格式有效，请问问题出在哪？

错误原因 #

现代前端打包工具（如Webpack、Vite、Create React App等）会自动将导入的JSON文件解析为JavaScript对象，你导入的clubDatabase已经是一个可用的JS对象，不需要再用JSON.parse()处理。

JSON.parse()的参数要求是JSON格式的字符串，你传入一个对象时，它会尝试把对象转换为原始值（比如字符串）来解析，这个过程失败就会抛出该错误。

解决方案 #

直接使用导入的对象即可，有两种常用方式：

1. 若使用命名空间导入（import * as），直接访问对象内容：

import * as clubDatabase from "../../database/clubs.json";
// 示例：获取俱乐部名称
console.log(clubDatabase["cId-0-001"].profile.name);

2. 更推荐使用默认导入，直接拿到JSON对应的对象：

import clubDatabase from "../../database/clubs.json";
// 示例：获取俱乐部成员列表
console.log(clubDatabase["cId-0-001"].members);

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