TypeScript库子路径导入配置后在React项目中报错如何解决

问题根因 #

Create React App 默认的Webpack配置未开启对package.json exports 字段的解析支持，模块解析时只会按物理路径查找文件，你没有对应子路径的实体文件/入口就会抛找不到模块的错误。你参考的workaround仅解决了TS的类型识别问题，没有兼容老版本构建工具的路径解析逻辑。

推荐解决方案（兼容所有消费场景，无需修改消费端配置） #

该方案无需修改消费端任何配置，兼容性最佳
在你的TS库根目录下，为每个需要暴露的子路径创建同名目录，目录内仅新增一个package.json文件，指向实际的构建产物路径即可，不需要添加任何业务代码，不会改动你原有源码结构。
比如要暴露my-lib/path1、my-lib/path2两个子路径，目录结构如下：

my-lib/
├── path1/
│   └── package.json
├── path2/
│   └── package.json
├── dist/
│   ├── index.js
│   ├── path1.js
│   └── path2.js
├── dist-types/
│   ├── index.d.ts
│   ├── path1.d.ts
│   └── path2.d.ts
└── package.json

其中path1/package.json内容为：

{
  "main": "../dist/path1.js",
  "types": "../dist-types/path1.d.ts"
}

path2/package.json同理修改对应路径即可。如果子路径较多，可以写个简单的Node脚本在打包完成后自动生成这些目录和配置文件，发布npm包时不要把这些目录加到.npmignore里即可。

可选解决方案（仅适用可修改消费端配置的场景） #

如果不想在库中新增虚拟目录，可让使用CRA的消费端通过craco或react-app-rewired工具修改Webpack配置，开启exports字段解析支持：

1. 首先安装对应工具：npm i @craco/craco
2. 项目根目录新增craco.config.js：

module.exports = {
  webpack: {
    configure(config) {
      config.resolve.exportsFields = ["exports"];
      return config;
    }
  }
}

3. 修改package.json中的启动脚本为craco调用：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

原有配置补充注意事项 #

• TS4.3的typeVersions配置不需要改动，和exports配合可以保证类型提示正常
• 如果需要同时兼容ESModule和CommonJS规范，可以在exports字段中补充import和require对应的不同入口路径

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