如何在节点和类型记录项目中导入d3.js？[ERR_REQUIRE_ESM]

Question

我正在使用类型记录、oclif和d3.js等工具进行节点项目。在用oclif创建项目时，类型记录是由npx配置的，所以我没有控制它的所有方面(特别是在TS方面，我不是专家)。TS是伟大的，但配置明智，meh)。

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

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，当它支持commonJS时，它的一个快速修复方法就是将其降级为版本6.7.0。

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

干杯