Búsqueda de sitios web

node.js - ¿Cómo importar d3.js en un proyecto de node y TypeScript? [ERR_REQUIRE_ESM]

Estoy trabajando en un proyecto de Node usando TypeScript, oclif y d3.js, entre otras cosas. TypeScript fue configurado por npx al crear el proyecto con oclif, así que no controlé todos los aspectos de ello (especialmente con respecto a TS, y no soy un experto. TS es genial, pero en cuanto a configuración, meh).

De todos modos, todo estaba funcionando bien, pero recientemente agregué d3 como una dependencia y traté de construir un documento, y obtengo este error al ejecutarlo:

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

En el archivo donde estoy usando d3 lo importo según la documentación:

import * as d3 from 'd3'

Sospecho que podría ser un problema después de compilar, así que aquí está tsconfig.json. No cambié nada desde la generación con npx.

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

Y en caso de que sea más relevante, aquí está también mi archivo package.json (tampoco cambié nada):

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

Encuentro este problema bastante confuso porque en todos los lugares donde he buscado sobre este problema, parece que estoy haciendo lo correcto. Supongo que el problema podría estar entre mi pantalla y mi silla, pero realmente no lo entiendo. Además, ¿debería usar la importación dinámica así?

const d3 = await import('d3')

Lo intenté, no funcionó. Hice que la función que genera el documento fuera asíncrona y añadí esa línea al principio, pero no. De todos modos, si creo en el error, esa sería la manera de hacerlo, pero no vi esta solución en ningún lado cuando buscaba una solución a mi problema. ¿Qué piensan ustedes?

Gracias

Respuesta #1

Así que gracias al aporte de un colega y a este artículo, el problema es que d3 ahora solo soporta ESM. Entonces, cuando el compilador convierte la importación en

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

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

Simplemente no funciona. Estaba usando la versión 7 de d3, y una solución rápida fue degradar a la versión 6.7.0, cuando sí soportaba commonJS.

Ahora, tengo que seguir adelante con este proyecto, pero seguiré investigando sobre ello y sobre cómo puedo usar una versión reciente de d3 en mi proyecto. ¡Si lo hago, editaré esa respuesta!

Salud

Artículos relacionados