使用yarn link测试React组件库遇错误，求解决方案

算力阿峰

2026-7-27

解决本地联调React组件库的两类错误

第一类：Webpack无法解析TypeScript语法（Unexpected token）

你直接导入了组件库的TS源码，但create-react-app生成的测试应用，其Webpack默认只处理自身项目内的TS文件，不会编译通过yarn link关联过来的组件库源码，导致TS的interface这类语法没被转译，触发解析错误。

给组件库添加编译流程，把TS源码转成可直接运行的JS（附带类型声明）：
- 在组件库根目录安装依赖：yarn add -D typescript @babel/preset-react @babel/preset-typescript
- 修改组件库的tsconfig.json，确保开启"declaration": true（生成.d.ts类型文件），指定"outDir": "./dist"（编译产物输出到dist目录）
- 在组件库的package.json里添加编译脚本："build": "tsc"，执行yarn build生成dist目录
- 配置组件库的package.json入口："main": "./dist/index.js"、"types": "./dist/index.d.ts"
在测试应用里不要直接导入组件库的src目录文件，改成导入组件库包名：import Button from "my-components-library"（前提是组件库的src/index.ts里导出了Button，比如export { default as Button } from './components/button'）

如果想实时预览组件库的修改，可执行tsc --watch开启实时编译，修改代码后dist目录会自动更新，测试应用刷新即可看到变化。

组件库内部用了src/xxx的绝对路径导入，这依赖组件库自身tsconfig.json的paths配置实现，但测试应用的TS编译器不识别组件库的路径别名，导致找不到对应模块。

推荐方案：在组件库编译阶段把绝对路径转成相对路径
安装tsconfig-paths-webpack-plugin（如果用Webpack打包）或@rollup/plugin-alias（如果用Rollup），在编译配置中配置别名替换，把src/xxx替换成相对路径，这样编译后的产物就不会有路径别名问题，测试应用导入后自然能识别。
临时方案（仅解决TS类型报错，Webpack打包仍可能出问题）：
在测试应用的tsconfig.json里添加组件库的路径别名：
```
"compilerOptions": {
  // 其他原有配置...
  "paths": {
    "src/*": ["../my-components-library/src/*"]
  }
}
```

在组件库的package.json里添加"prepare": "tsc"，这样每次执行yarn link或安装组件库依赖时，都会自动触发编译，省去手动执行yarn build的步骤。

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