typescript 如何在CJS优先的项目中导入扩展名为.mts的文件?

lf3rwulv  于 2023-08-07  发布在  TypeScript
关注(0)|答案(1)|浏览(194)

这里有一个fetchin.mts文件:

import type { RequestInfo, RequestInit, Response } from "node-fetch";
const importDynamic = new Function("modulePath", "return import(modulePath);")

export async function fetch(url: URL | RequestInfo, init?: RequestInit) : Promise<Response> {
  const {default: fetch} = await importDynamic("node-fetch");
  return fetch(url, init);
}

字符串
当我试图像这样在另一个文件上导入fetch函数时:

import {fetch} from "../utils/fetchin.mjs"


我得到一个ts错误:

The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("../utils/fetchin.mjs")' call instead.
  To convert this file to an ECMAScript module, change its file extension to '.mts', or add the field `"type": "module"` to '/package.json'.ts(1479)


我已经尝试过把"type": "module"放在json包上的建议,但我仍然无法修复将其导入到另一个文件时的ts错误,并尝试在谷歌上研究这些东西,但我找不到任何参考资料
下面是我的tsconfig.json文件:

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "compilerOptions": {
    "removeComments": false,
    "preserveConstEnums": true,
    "outDir": "lib/",
    "sourceMap": true,
    "esModuleInterop": true,
    "strict": true
  },
  "ts-node": {
    "files": ["src/types/modules.d.ts"],
  }
}


我也看到一些文章,我需要降级tsconfig/node 18到tsconfig/node 16,但我仍然不明白。救命啊!

rxztt3cl

rxztt3cl1#

您还没有真正说明导入fetch的另一个文件使用的是什么文件扩展名,但我将假设它是.ts扩展名,并且您的package.json使用"type": "commonjs"(或未指定,因此默认为CJS)。我还将忽略ts-node的使用,而专注于tsc
下面是tsconfig.json(和你的一样,但没有ts-node的东西):

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "compilerOptions": {
    "removeComments": false,
    "preserveConstEnums": true,
    "outDir": "lib/",
    "sourceMap": true,
    "esModuleInterop": true,
    "strict": true
  }
}

字符串
简单的解决方法是在package.json中使用"type": "module"。然后只需运行./node_modules/.bin/tsc即可获得成功的构建。我知道你说你试过这个,但你一定忽略了什么,因为这确实有效。
如果您想继续使用CJS,即"type": "commonjs",然后在从.mts文件导入fetch时使用动态导入。
让我们调用另一个文件other.ts

const importFetch = async () => {
  const { fetch } = await import('./fetchin.mjs')
}

importFetch()


现在像以前一样再次运行tsc以获得成功的构建,或者运行ts-node other.ts。顺便说一下,这正是错误消息所建议的。

相关问题