如何在 Node 和 TypeScript 项目中导入 d3.js？[ERR_REQUIRE_ESM]

Question

我正在使用 typescript、oclif 和 d3.js 等开发一个节点项目。Typescript 是在使用ocif创建项目时由 npx 配置的，因此我无法控制它的所有方面（特别是关于 TS，我不是专家。TS 很棒，但配置方面，嗯）。

不管怎样，一切都工作正常，但我最近添加了 d3 作为依赖项并尝试构建文档，但在运行它时出现此错误：

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

在我使用 d3 的文件中，我按照文档导入它：

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

我怀疑编译后可能有问题，所以这里是tsconfig.json。自从 npx 生成以来我没有改变任何东西。

import * as d3 from 'd3'

如果它更相关，这也是我的package.json文件（也没有更改任何内容）：

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

我发现这个问题非常令人困惑，因为我一直在搜索这个问题，似乎我正在做正确的事情。我认为问题可能出在我的屏幕和椅子之间，但实际上我不明白。另外，我应该像这样使用动态导入吗？

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

我尝试过，但没有成功。我创建了异步生成文档的函数，并在开头添加了该行，但没有。无论如何，如果我相信这个错误，那就是要走的路，但在寻找问题的解决方案时，我没有在任何地方看到这个解决方案。你们有什么感想？

谢谢

Answer 1

因此，由于同事和本文的输入，问题是 d3 现在仅支持 ESM。所以当编译器将导入变成

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

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

它就是行不通。我使用的是 d3 版本 7，当它确实支持 commonJS 时，一个快速修复方法是降级到 version 6.7.0。

现在，我必须继续这个项目，但我会继续研究它以及如何在我的项目中使用最新版本的 d3。如果我这样做，我会编辑该答案！

干杯