如何在节点和打字稿项目中导入d3.js？ [err_require_esm]

Question

我正在使用TypeScript，OCLIF和D3.JS等节点项目。用

无论如何，一切都很好，但是我最近添加了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的文件中，我将其导入为 pher文档：

import * as d3 from 'd3'

我怀疑编译后可能是一个问题，所以这里是tsconfig.json。自NPX发电以来，我没有改变任何事情。

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

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

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

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

const d3 = await import('d3')

我尝试过，它不起作用。我制作了生成文档异步的函数，并在开始时添加了该行。无论如何，如果我相信这个错误，那将是要解决的路，但是在寻找解决方案的解决方案时，我没有看到这个解决方案。你们怎么看？

谢谢

Answer 1

因此，感谢同事的输入和本文，问题是现在D3仅支持ESM。因此，当编译器将导入转入其中时，

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

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

就无法正常工作。我正在使用D3版本7，而它的快速修复是在支持CommonJ时降级到版本6.7.0。

现在，我必须继续进行此项目，但是我将继续研究它，并如何在项目中使用D3的最新版本。如果我这样做，我将编辑这个答案！

干杯