Is there a way to use D3.JS in an electron app?

Question

I am very new to Electron, nodejs and D3 and I am trying to import d3 so I can use it for data visualisation.

My app is running Electron version 22.0.2 NodeJS version 18.12.1 D3 version 7.8.2

I have downloaded d3 using "npm i d3" and whenever I try to use it I get an error saying "Error [ERR_REQUIRE_ESM]: require() of ES Module"

Here is an screenshot from my main.js file, line 4 is what is giving me an error

also here is my package.json file

I have tried putting type = module in my package.json but that hasn't helped my problem.

Answer 1

Looks like you're attempting to require() d3 in the main process (e.g., inside Node). You need to load it in the renderer process instead (e.g., inside the Chromium window). There are a number of ways you can do this depending on how your Electron app is structured. Simplest would be to follow the instructions in this answer but checking out other upvoted answers on that page will give other alternatives and a more detailed explanation of why and when alternative methods should be used.