yarn link引入本地React组件包时出现react-refresh-webpack-plugin解析错误

报错原因 #

该报错指向TS类型导出语法export type无法识别，核心是第二个项目的webpack默认仅编译项目自身src目录下的文件，不会处理node_modules下的依赖源码，你通过yarn link引入的组件包被webpack判定为外部依赖，没有触发TS语法编译流程。

解决方案 #

1. 优先修正组件包的构建配置 #

这是最彻底的解决方式，不需要修改引用方的配置：

• 确认Rollup构建输出包含编译后的纯JS产物 + .d.ts类型声明文件，不要直接导出TS源码
• 检查组件包package.json的入口配置是否正确：
  • main字段指向CommonJS格式产物，例如dist/index.cjs.js
  • module字段指向ES Module格式产物，例如dist/index.esm.js
  • types字段指向类型声明入口，例如dist/index.d.ts
• 组件包的react、react-dom、styled-components等公共依赖要放入peerDependencies，Rollup构建时配置external排除这些依赖，避免打包重复代码。

2. 本地调试临时方案 #

如果需要实时调试组件包源码，不想每次修改都重新构建，可修改第二个项目的webpack配置，让loader处理组件包的源码路径：

• 若使用未eject的create-react-app，可通过craco/react-app-rewired修改配置，示例如下：

// craco.config.js
const path = require('path');
module.exports = {
  webpack: {
    configure: (config) => {
      // 找到babel-loader配置项
      const babelRule = config.module.rules.find(rule => rule.loader?.includes('babel-loader'));
      // 追加组件包本地路径到编译范围
      babelRule.include.push(path.resolve(__dirname, '../enrollment-client'));
      return config;
    }
  }
}

• 若为自定义webpack配置，直接修改ts-loader/babel-loader的include配置，加入组件包的本地绝对路径即可。

3. 替代yarn link的调试方式 #

如果yarn link一直出现依赖解析异常，可以直接用本地路径安装组件包，效果一致：

yarn add file:/你的组件包本地绝对路径

额外注意事项 #

两个项目的React、styled-components版本要保持一致，避免出现多实例导致的运行时报错。

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