node.js - Kako uvesti d3.js u node i TypeScript projekt? [ERR_REQUIRE_ESM]

Radim na Node projektu koristeći TypeScript, oclif i d3.js, između ostalog. TypeScript je konfigurirao npx prilikom kreiranja projekta s oclif, tako da nisam kontrolirao sve aspekte toga (posebno što se tiče TS-a, a nisam stručnjak. TS je odličan, ali konfiguracijski, meh).

U svakom slučaju, sve je radilo dobro, ali nedavno sam dodao d3 kao ovisnost i pokušao izgraditi dokument, i dobivam ovu pogrešku kada ga pokrenem:

(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.

U datoteci u kojoj koristim d3, uvozim ga prema dokumentaciji:

import * as d3 from 'd3'

Sumnjam da bi mogao biti problem nakon kompilacije, pa evo tsconfig.json. Nisam ništa mijenjao od generiranja pomoću npx.

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

A u slučaju da je to relevantnije, evo i moje datoteke package.json (ništa nisam mijenjao):

{
  "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"
}

Ovaj problem mi je prilično zbunjujući jer gdje god sam tražio informacije o ovom problemu, čini se da radim pravu stvar. Pretpostavljam da problem može biti između mog ekrana i stolice, ali stvarno ne razumijem. Također, trebam li koristiti dinamički uvoz ovako?

const d3 = await import('d3')

Pokušao sam, nije uspjelo. Napravio sam funkciju koja generira dokument asinhrono i dodao tu liniju na početak, ali ništa. U svakom slučaju, ako vjerujem pogrešci, to bi bio pravi način, ali nisam vidio ovo rješenje nigdje dok sam tražio rješenje svog problema. Što vi mislite?

Hvala

Odgovor #1

Dakle, zahvaljujući doprinosu kolege i ovom članku, problem je što d3 sada podržava samo ESM. Dakle, kada prevoditelj pretvori uvoz u

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

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

to jednostavno ne radi. Koristio sam d3 verziju 7, a brzo rješenje bilo je vratiti se na verziju 6.7.0, kada je podržavala commonJS.

Sada moram nastaviti s ovim projektom, ali nastavit ću ga istraživati i kako mogu koristiti nedavnu verziju d3 u svom projektu. Ako to učinim, urediti ću taj odgovor!

Živjeli

Povezani članci