如何通过符号链接共享React组件？解决编译及多实例冲突问题

一、修复Parcel无法解析react/jsx-dev-runtime的报错 #

用符号链接引入外部组件时，Parcel会默认从组件所在目录查找React依赖，而非主项目的node_modules，从而引发解析失败。可通过以下两种方式解决：

1. 给Parcel配置依赖别名 #

在主项目的package.json中添加别名规则，强制Parcel从主项目的node_modules加载React相关包：

"alias": {
  "react": "./node_modules/react",
  "react/jsx-dev-runtime": "./node_modules/react/jsx-dev-runtime",
  "react-dom": "./node_modules/react-dom"
}

2. 给共享组件目录添加package.json声明 #

在共享组件所在目录（比如/Users/mahdi/dev/temp/components/）创建极简package.json，将React声明为peer依赖，告知Parcel组件依赖的React由宿主项目提供：

{
  "name": "shared-components",
  "peerDependencies": {
    "react": "^18.x",
    "react-dom": "^18.x"
  }
}

二、解决yarn link导致多React实例冲突的问题 #

yarn link会让共享组件使用自身node_modules中的React实例，与主项目的React实例不一致，进而引发hooks相关报错。可通过以下方式解决：

1. 移除共享组件的本地React依赖 #

先卸载共享组件中的React和React-dom：

yarn remove react react-dom

然后在共享组件的package.json中添加peerDependencies配置（同上述步骤），确保组件运行时复用宿主项目的React。

2. 手动链接主项目的React到共享组件 #

若不想删除本地依赖，可在共享组件目录中创建符号链接，直接指向主项目的React相关包：

ln -s /Users/mahdi/dev/your-web-project/node_modules/react ./node_modules/react
ln -s /Users/mahdi/dev/your-web-project/node_modules/react-dom ./node_modules/react-dom
ln -s /Users/mahdi/dev/your-web-project/node_modules/react/jsx-dev-runtime ./node_modules/react/jsx-dev-runtime

验证步骤 #

修改配置后，需：

• 重启Parcel开发服务器，建议添加--no-cache参数清除缓存
• 确认主项目与共享组件的React版本一致，版本不匹配也可能引发问题

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