构建支持子模块导入的React组件库时TypeScript模块找不到问题求助

修复方案 #

1. 调整tsconfig.json模块解析规则 #

当前配置的"moduleResolution": "classic"为旧版解析规则，不支持Node.js子路径模块解析逻辑，将其修改为：

"moduleResolution": "node"

若使用TypeScript 4.7及以上版本，可配置为"node16"/"nodenext"获得更完善的ESM模块支持。

2. 修正package.json类型声明匹配规则 #

你当前的typesVersions子路径缺少./前缀，和exports字段的子路径规则不匹配，修正如下：

"typesVersions": {
  "*": {
    ".": ["./dist/index.d.ts"],
    "./forms": ["./dist/forms.d.ts"]
  }
}

若使用TypeScript 4.7及以上版本，可直接在exports字段内配置类型声明，无需单独编写typesVersions，配置更简洁：

"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "default": "./dist/index.js"
  },
  "./forms": {
    "types": "./dist/forms.d.ts",
    "default": "./dist/forms.js"
  }
}

3. 调整构建输出命名 #

你当前exports中配置的JS文件后缀为.tsx.js属于非常规命名，建议调整构建配置，将输出的JS文件命名为标准的index.js、forms.js，和上述配置对应，避免解析异常。

4. 本地测试校验 #

如果使用npm link/yarn link在本地测试组件库，需保证引用组件库的业务项目tsconfig也配置了正确的moduleResolution规则，测试时可临时关闭skipLibCheck确认无类型错误。

内容的提问来源于stack exchange，提问作者Sankalp