React TypeScript库构建后绝对路径导入模块解析失败报错

tsconfig.json中的baseUrl配置仅作用于TypeScript编译阶段的路径解析，原生tsc不会改写源码中的import路径。你源码里写的import CollabsibleMenu from 'components/collapsibleMenu'，经过tsc编译输出到dist目录后，JS代码中原样保留了这段导入语句。当外部项目引入你的组件库做模块解析时，会把components/collapsibleMenu识别为node_modules下的第三方包路径，自然找不到对应模块，抛出解析失败错误。
你之前构建脚本里把tsconfig拷贝为dist目录下的jsconfig.json是无效操作，外部项目打包时不会读取你依赖包内部dist目录的配置做路径映射。

按推荐优先级从高到低排序：

• 方案1：改用相对路径导入（零配置最稳妥）
  组件库开发最通用、出错率最低的方式就是放弃baseUrl绝对路径别名，所有内部模块导入都使用相对路径，示例：

  // 根据当前文件的实际目录层级调整相对路径前缀即可
  import CollabsibleMenu from '../collapsibleMenu';
  

  这种写法编译后路径完全正确，不需要额外做任何路径替换配置，不会出现模块解析兼容问题，是组件库开发的首选方案。

• 方案2：构建阶段自动替换别名路径（保留绝对路径写法）
  如果一定要保留绝对路径别名的编码习惯，可以用专门的路径替换工具在tsc编译完成后，把JS和类型声明文件里的别名导入替换为正确的相对路径，操作步骤如下：

  1. 安装开发依赖tsc-alias
  2. 修改package.json中的build脚本，去掉无效的jsconfig拷贝逻辑，增加路径替换步骤：

     "build": "rm -rf dist/ && tsc && tsc-alias"
     

  该工具会自动读取tsconfig中的baseUrl配置，批量处理编译产物里所有别名导入路径，JS运行时代码和TS类型声明文件里的路径都会被正确替换，不需要手动改源码。

• 方案3：package.json子路径映射（不推荐）
  可以通过package.json的imports/exports字段手动配置子路径别名映射，但这种方式需要统一给别名加特殊前缀（比如#components/*），还要手动维护所有路径映射规则，组件量大了之后维护成本极高，不推荐使用。

• 当前package.json中typescript、react-scripts、所有testing相关依赖、@types类型依赖都放在了dependencies字段下，这些都属于开发/构建阶段的依赖，应该全部移到devDependencies，否则用户安装你的组件库时会冗余安装大量无关依赖，无谓增加安装体积和时间。
• 配置中"private": true字段会阻止包被发布到npm，如果后续需要公开发布，记得删除该字段或设置为false。

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