ParcelJS中d3.json请求返回HTML而非JSON的问题求助

问题根源 #

Parcel默认会把项目里的JSON文件当作模块处理，而非静态资源。当你用d3.json()请求不在public目录下的JSON文件时，Parcel开发服务器的路由会 fallback 到项目入口HTML文件（比如index.html），导致返回的是HTML内容而非JSON，进而触发SyntaxError: Unexpected token '<'错误。而将JSON转为JS模块导入时，Parcel能正确识别并处理模块，所以可以正常加载，但这种方式无法实现按需加载的需求。

解决方案 #

方法1：用Parcel的public目录存放静态JSON #

Parcel会把项目根目录下public文件夹里的文件原封不动复制到输出目录，且可直接通过根路径访问，非常适合存放需要按需加载的静态资源：

1. 在项目根目录创建public文件夹（如果还没有）。
2. 将names.json移动到public目录中。
3. 修改d3.json的请求路径为根路径：

d3.json("/names.json").then(function(data) {
  console.log(data);
});

4. 重启Parcel开发服务器，重新测试请求。

方法2：手动配置Parcel处理静态JSON（可选） #

如果不想用public目录，可以通过Parcel配置文件指定对特定JSON文件的处理规则，将其当作静态资源输出：

1. 在项目根目录创建.parcelrc文件，添加如下配置：

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.json": ["@parcel/transformer-json"]
  },
  "optimizers": {
    "*.json": []
  }
}

2. 确保请求路径正确（相对于入口HTML文件的路径），比如如果names.json和入口HTML在同一输出目录，直接用d3.json("names.json")即可。

验证 #

修改完成后，打开浏览器开发者工具的网络面板，查看names.json的请求响应，确认返回的是正确的JSON内容而非HTML，此时d3.json就能正常解析数据了。

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