Typescript问题记录:无法找到模块 XXX

背景

引入 npm 依赖包时,明明这个包定义了相关的 types 文件,为什么引入时还是提示「无法找到模块 XXX」?例如,该依赖包的 package.json 信息如下:

json 复制代码
{
  "name": "my-module",
  "exports": {
    ".": "./main.js",
    "./feature": "./lib/feature.js"
  },
  "types": "./lib/feature.js"
}

这里有可能是这个依赖包定义 types 文件有问题,如果该依赖包所在项目中的 package.json 文件中设置了 exports 属性,将不会读取外层的 types 属性。

这种情况下,你注意查看详细错误,会有这么一段话:

There are types at 'XXX/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'xxx' library may need to update its package.json or typings.

从以上提示可以看出跟 package.json 中的 exports 有关。

exports

exports 具体是做什么用的呢?

exports 字段在 package.json 文件中用于定义模块的导出方式。这是 Node.js 中的一个新特性,用于替代 main 字段,提供更加灵活的模块导出方式。

exports 字段可以定义一个对象,对象的键是导出模块的名称,值是模块的实际文件路径。这样,当其他模块尝试导入该模块时,就会根据 exports 字段的定义来确定实际导入哪个文件。

例如,你可以在 package.json 文件中这样定义 exports 字段:

json 复制代码
{
  "name": "my-module",
  "exports": {
    ".": "./main.js",
    "./feature": "./lib/feature.js"
  }
}

在这个例子中,如果其他模块尝试导入 my-module,那么实际上会导入 main.js 文件。如果尝试导入 my-module/feature,那么实际上会导入 lib/feature.js 文件。

这样,你就可以更加灵活地控制模块的导出方式,而不仅仅是通过 main 字段指定一个入口文件。

解决方案

如果依赖包中通过 exports 定义导出方式,在 typescript 中如何指定类型定义文件呢?

在 TypeScript 中,你可以使用 typestypings 字段在 package.json 文件中指定类型定义文件的路径。这个文件通常是一个 .d.ts 文件,包含了模块的类型定义。

例如,可以这样设置:

json 复制代码
{
  "name": "my-module",
  "main": "./dist/main.js",
  "types": "./dist/main.d.ts",
  "exports": {
    ".": {
      "import": "./dist/main.js",
      "require": "./dist/main.cjs",
      "types": "./dist/main.d.ts"
    },
    "./feature": {
      "import": "./dist/feature.js",
      "require": "./dist/feature.cjs",
      "types": "./dist/feature.d.ts"
    }
  }
}

在这个例子中,types 字段指定了主模块的类型定义文件的路径,而 exports 字段中的每个导出都有一个对应的 types 字段,指定了该导出的类型定义文件的路径。

这样,当其他 TypeScript 模块尝试导入 my-modulemy-module/feature 时,TypeScript 就会根据这些 types 字段找到对应的类型定义文件,以获取模块的类型信息。

这样设置后,再引入这个依赖包就不会提示「无法找到模块 XXX」。

当然,如果没有特殊需要,也可以不使用 exports 字段,直接设置 maintypes 就好。

相关推荐
Ziky学习记录11 分钟前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n17 分钟前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n20 分钟前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
狗哥哥42 分钟前
微前端路由设计方案 & 子应用管理保活
前端·架构
前端大卫1 小时前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘2 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare2 小时前
浅浅看一下设计模式
前端
Lee川2 小时前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
Ticnix2 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人2 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc