Angular+Webpack环境下D3 v7无法解析JSON文件导入的问题

问题背景 #

基于Webpack的Angular项目，从d3-format v5升级到v7后，原导入语句：

import d3Format from "d3-format/locale/en-US.json";

出现构建错误：

Module not found: Error: Can't resolve 'd3-format/locale/en-US.json'

原因是d3-format v7的package.json新增了exports字段，定义了包内路径的映射规则，Webpack解析时会优先遵循这个配置，导致带.json后缀的导入路径不匹配。

解决方案 #

方案1：修正导入路径（推荐） #

按照d3-format v7的exports配置规则，去掉导入路径中的.json后缀：

import d3Format from "d3-format/locale/en-US";

exports里的"./locale/*": "./locale/*.json"会自动将这个路径映射到对应目录下的JSON文件，既符合包的规范，又无需额外配置。

方案2：给Webpack添加路径别名（适配低版本Webpack） #

如果你的Webpack版本低于5（对package exports支持不完善），可以在webpack.config.js中添加别名配置，强制Webpack解析到正确的目录：

const path = require('path');

module.exports = {
  // ...其他项目配置
  resolve: {
    alias: {
      "d3-format/locale": path.resolve(__dirname, "node_modules/d3-format/locale")
    }
  }
};

配置后原有的带.json后缀的导入语句即可正常工作。

方案3：升级Webpack到5+ #

Webpack 5原生支持ECMAScript模块的条件导出（exports字段），升级到Webpack 5后，只要导入路径符合exports的规则（比如方案1的写法），就能正常解析，无需额外配置。

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