尝试将节点模块导入 NuxtJS TypeScript (ES2018) 时出错

Question

我正在尝试像这样导入 chess.js 模块：

import Chess from 'chess.js';

在本地加载应用程序时出现以下错误：

require() of ES Module .../app/node_modules/chess.js/chess.js from .../app/node_modules/vue-server-renderer/build.dev.js not supported. Instead change the require of chess.js in .../app/node_modules/vue-server-renderer/build.dev.js to a dynamic import() which is available in all CommonJS modules.

好吧，我已经在使用 import 语句，而不是 require。我试过使用不同的方法来导入模块，但没有任何效果。我知道这是由于在创建 NuxtJS 应用程序时使用了 TypeScript 造成的。我目前正在尝试将 chess.js 模块导入 .js 文件，而不是 .ts 文件，这里有些东西被误译了。

有什么想法吗？

这是我的 tsconfig:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios",
      "@types/node"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

UPDATE 将 .js 文件转换为 .ts 并且运行 'npm i --save-dev @types/chess.js' 成功了。但我仍然想知道是否有办法让原始 JS 脚本工作。

Answer 1

您可以尝试将 import() 函数与 JavaScript 一起使用。

您需要按照以下步骤来完成它。

从 package.json 中删除以下行。
```
{
  "type": "module"
}
```
将您的 import 语句更改为以下内容。确保您使用的是 Node.js 的 LTS 版本，因为旧版本不支持 top-level await!
```
const chess = await import("chess.js");
```

这应该可以消除错误，同时还允许您使用 JavaScript。

尝试将节点模块导入 NuxtJS TypeScript (ES2018) 时出错

Error when attempting to import a node module into NuxtJS TypeScript (ES2018)

npm

typescript

nuxt.js