如何在Electron应用中使用D3.js？ESM导入报错求助

问题根源 #

D3.js 7.x之后全改成纯ES模块了，没法直接用require()导入。Electron的主进程（main.js）默认是CommonJS环境，就算你在package.json里加了"type": "module"，主进程的加载逻辑还是受Electron自身机制限制，照样会报错。

三种解决办法 #

1. 把D3放到渲染进程里用（最推荐） #

数据可视化本来就该在渲染进程做，直接在HTML里用ES模块导入就行：

<script type="module">
  import * as d3 from 'd3';
  // 写你的可视化代码，比如测试一下：
  d3.select('body').append('div').text('D3跑起来了！');
</script>

package.json里保留"type": "module"，主进程代码该怎么写还怎么写（反正主进程不用D3）。

2. 主进程里用动态导入（非要在主进程用的话） #

把原来的require('d3')换成异步的动态导入：

// main.js里替换掉报错的那行
async function initD3() {
  const d3 = await import('d3');
  // 在这里用d3的API就行
}
initD3();

注意这是异步操作，必须用async/await包裹。

3. 降级D3到支持CommonJS的版本 #

嫌麻烦的话，直接装D3 6.x版本（最后一个支持require()的大版本）：

npm uninstall d3
npm install d3@6

装完就能继续用const d3 = require('d3')导入了。

额外提醒 #

• 如果非要让主进程用ES模块，除了加"type": "module"，最好把main.js改成.mjs后缀，不然Electron可能还是按CommonJS加载。
• 渲染进程里用ES模块的话，要是加载本地文件，得确保Electron的webPreferences里开了nodeIntegration: true和contextIsolation: false——或者用预加载脚本传D3对象，更安全。

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