How to import d3.js in a node and typescript project? [ERR_REQUIRE_ESM]

Question

I'm working on a node project using typescript, oclif and d3.js, among other things. Typescript was configured by npx when creating the project with oclif so I didn't control all aspects of it (especially regarding TS, and I'm not an expert. TS is great, but configuration wise, meh).

Anyway, everything was working fine, but I recently added d3 as a dependency and tried to build a document, and I get this error when running it:

(node:22554) [ERR_REQUIRE_ESM] Error Plugin: dbacl [ERR_REQUIRE_ESM]: require() of ES Module /dbacl/node_modules/d3/src/index.js from /dbacl/src/tree/graph-tree.ts not supported.
Instead change the require of index.js in /Users/nico/Furo/Dev/dbacl/src/tree/graph-tree.ts to a dynamic import() which is available in all CommonJS modules.

In the file where I'm using d3 I import it as per documentation:

import * as d3 from 'd3'

I suspect it might be a problem after compiling, so here is tsconfig.json. I didn't change anything since generation by npx.

{
  "compilerOptions": {
    "declaration": true,
    "importHelpers": true,
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "target": "es2019",
  },
  "include": [
    "src/**/*"
  ]
}

And in case it's more relevant, here is my package.json file as well (didn't change anything either):

{
  "name": "dbacl",
  "version": "0.0.0",
  "description": "",
  "author": "",
  "bin": {
    "dbacl": "./bin/run"
  },
  "license": "MIT",
  "main": "dist/index.js",
  "repository": "*****/dbacl",
  "files": [
    "/bin",
    "/dist",
    "/npm-shrinkwrap.json",
    "/oclif.manifest.json"
  ],
  "dependencies": {
    "@oclif/core": "^1",
    "@oclif/plugin-help": "^5",
    "@oclif/plugin-plugins": "^2.0.1",
    "@types/d3": "^7.4.0",
    "@types/jsdom": "^16.2.14",
    "d3": "^7.6.1",
    "directory-tree": "^3.3.0",
    "jsdom": "^20.0.0",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "@oclif/test": "^2",
    "@types/chai": "^4",
    "@types/mocha": "^9.0.0",
    "@types/node": "^16.9.4",
    "chai": "^4",
    "eslint": "^7.32.0",
    "eslint-config-oclif": "^4",
    "eslint-config-oclif-typescript": "^1.0.2",
    "globby": "^11",
    "mocha": "^9",
    "oclif": "^3",
    "shx": "^0.3.3",
    "ts-node": "^10.2.1",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3"
  },
  "oclif": {
    "bin": "dbacl",
    "dirname": "dbacl",
    "commands": "./dist/commands",
    "plugins": [
      "@oclif/plugin-help",
      "@oclif/plugin-plugins"
    ],
    "topicSeparator": " ",
    "topics": {
      "hello": {
        "description": "Say hello to the world and others"
      }
    }
  },
  "scripts": {
    "build": "shx rm -rf dist && tsc -b",
    "lint": "eslint . --ext .ts --config .eslintrc",
    "postpack": "shx rm -f oclif.manifest.json",
    "posttest": "yarn lint",
    "prepack": "yarn build && oclif manifest && oclif readme",
    "test": "mocha --forbid-only \"test/**/*.test.ts\"",
    "version": "oclif readme && git add README.md"
  },
  "engines": {
    "node": ">=12.0.0"
  },
  "keywords": [
    "oclif"
  ],
  "types": "dist/index.d.ts"
}

I find this problem quite confusing because everywhere I've been searching about this problem, it seems I'm doing the right thing. I assume the problem might be between my screen and my chair, but really I don't get it. Also, should I use the dynamic import like this?

const d3 = await import('d3')

I tried, it didn't work. I made the function that generates the document async and added that line at the start but nope. Anyway, if I believe the error, that would be the way to go but I didn't see this solution anywhere when looking for a solution to my problem. What do you guys think?

Thanks

Answer 1

So thanks to the input from a colleague and this article, the problem is that d3 now supports ESM only. So when the compiler turns the import into

// index.ts
import * as d3 from 'd3'

// compiled index.js
const d3 = require('d3')

it just doesn't work. I was using d3 version 7, and a quick fix to it was to downgrade to version 6.7.0, when it did support commonJS.

Now, I have to move on with this project, but I'll keep looking into it and into how I can use a recent version of d3 in my project. If I do, I'll edit that answer!

Cheers