monorepo + React + vite 无法使用公共UI库 ?-灵析社区

577739990

## 描述 **在monorepo项目中packages中创建一个公共UI库(ui-lib)在react-ts-app中使用的时候会有如下提示** ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/c3c6a8d4cb7f45adb857666d8e1bde83.png) ### 抓头时间😩 在一顿网上冲浪查询之后,说是存在多个React实例 **链接** [https://juejin.cn/post/7121178707490209806](https://link.segmentfault.com/?enc=OCmlhil99rBEhmxS6OIAzw%3D%3D.UK2ZYlqyOeH17FhS7%2F0I6vGSAFEKUjJoAxM1Etr52ruuLcdZAwYsQgmrQUoDybOO) ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/2a118e7509a19812b07c1d2adeb885fb.png) 针对该问题问了下GPT给我的回答: _嘤嘤嘤_ 😭😭😭 ### 一顿操作之后问题还是没有解决!!!😭😭😭 ### 文件目录 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/c1d6639b46f2ce4ce849e3e4a4d26223.png) 补充一下项目使用的是webpack打包的,react版本 18.2.0。UI-lib React版本 18.3.1 #### 有没有什么解决方法啊救救孩子 项目GIT地址:[https://gitee.com/yyytxxx/monorepo/tree/test/](https://link.segmentfault.com/?enc=fCY87bMbZ3UgOsow1Qtgfg%3D%3D.NRANm24jB69EHpbdcWdCdjGQwaXnN1B9OvxT%2BXXmj6IJwCG7TIVIxipWjHy3pGTh) ### 补充 0801-1839: PS:从代码库拉的代码如果直接在根目录下pnpm i 的话会导致 react-ts-app 中的react版本更到最新的即与ui-lib的版本一致(这种情况不会有问题)。** _只有他们的React的版本有差异才会出现上面多个实例的错误_** ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20240918/fe25a96ccbffcbdf3d36c21e22a7a637.png) # 在react-ts-app中执行,确保存在差异 pnpm remove react react-dom @types/react @types/react-dom pnpm add react@18.2.0 react-dom@18.2.0 pnpm add -D @types/react@18.2.46 @types/react-dom@18.2.18

阅读量:122

点赞量:0

问AI
"UI库" 不能把 "框架" 作为自己的 "dependencies", 因为这样构建的时候会把 "框架" 打到 "库" 的产物里面,业务项目本身自己会安装 "框架",使用 "UI库" 的时候可能存在版本不一致,或者上述的两个实例等问题 // 错误配置 { "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", } } 一般都是采用将 "框架" 作为 "库" 的 * "devDependencies" 以满足开发环境使用 * "peerDependencies" 给 "库" 的使用端进行 "依赖版本" 约束和提示 目的是实现只在顶层项目安装 "框架" 依赖,"UI库" 构建的时候不将框架打包到产物中 // 推荐配置 { "devDependencies": { "react": "^18.3.1", "react-dom": "^18.3.1", }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" }, } 最后还需要在 "UI库" 的构建配置中,将框架排除掉,用 "vite" 举例: export default defineConfig({ build: { rollupOptions: { external: ['react', 'react-dom'] } } })