Vue 2.15.3 Node 18.18.0 d3-org-chart require() of ES Module

Question

I am using Nuxt 2 with Vue version 2.15.3 and my Node version is 18.18.0, npm 9.8.1

"nuxt": "^2.15.3",
"d3-org-chart": "^3.1.1",

After npm install d3-org-chart, when import {OrgChart} from 'd3-org-chart'; I get following error:

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.

I tried npm install --save-dev @types/d3-org-chart, that did not help. Same error.

Answer 1

You can transpile d3 related packages in nuxt config:

// nuxt.config.js
export default {
  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: [/^d3-/, 'internmap'],
  },
};

playground: https://stackblitz.com/edit/github-fqdabb

Answer 2

When you try to import a CommonJS module with the import syntax, JavaScript will consider the file to be an ES module and try to process it as an ES Module. This can cause errors at runtime because JavaScript cannot find a valid import

/node_modules/d3-selection/src/index.js

That file probably mean to be a common module and you will get an error when you trying to import it using es module syntax which is the import syntax. To avoid that error you need to import it in common module way using require syntax like this:

const OrgChart = require("d3-org-chart")