Nuxt 2集成d3-org-chart遇ES模块require()不兼容错误求助

问题背景 #

使用环境：

• Nuxt 2 ^2.15.3
• Vue 2.15.3
• Node 18.18.0
• npm 9.8.1

执行npm install d3-org-chart安装v3.1.1版本后，通过import {OrgChart} from 'd3-org-chart';引入时触发错误：

Error require() of ES Module /node_modules/d3-selection/src/index.js from /node_modules/d3-org-chart/build/d3-org-chart.min.js not supported. Instead change the require of index.js in /node_modules/d3-org-chart/build/d3-org-chart.min.js to a dynamic import() which is available in all CommonJS modules.

尝试安装@types/d3-org-chart后问题未解决。

解决方案 #

方案1：降级d3-org-chart到兼容CommonJS的版本 #

d3-org-chart v3.x已转为纯ES模块，而Nuxt 2默认基于CommonJS运行时，两者存在兼容问题。可以降级到v2.x版本：

npm uninstall d3-org-chart
npm install d3-org-chart@^2.0.0

安装完成后直接使用原引入方式即可。

方案2：配置Nuxt 2转译ES模块并使用动态导入 #

如果需要保留v3.x版本，可通过以下步骤处理：

1. 在nuxt.config.js中添加需要转译的d3相关包：

export default {
  build: {
    transpile: ['d3-org-chart', 'd3-selection', 'd3-hierarchy', 'd3-shape', 'd3-transition']
  }
}

2. 在组件中使用动态导入替代静态导入：

export default {
  async mounted() {
    const { OrgChart } = await import('d3-org-chart')
    // 后续使用OrgChart的业务逻辑
  }
}

方案3：修改Nuxt的模块解析配置 #

在nuxt.config.js的build.extend中添加ES模块解析支持：

export default {
  build: {
    extend(config, { isDev, isClient }) {
      config.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto'
      })
    }
  }
}

同时配合动态导入使用，避免静态引入触发错误。

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