monorepo + React + vite 无法使用公共UI库 ?

Question

描述

在monorepo项目中packages中创建一个公共UI库（ui-lib）在react-ts-app中使用的时候会有如下提示

抓头时间😩

在一顿网上冲浪查询之后，说是存在多个React实例
链接 https://juejin.cn/post/7121178707490209806

针对该问题问了下GPT给我的回答：嘤嘤嘤 😭😭😭

一顿操作之后问题还是没有解决！！！😭😭😭

文件目录

补充一下项目使用的是webpack打包的，react版本 18.2.0。UI-lib React版本 18.3.1

有没有什么解决方法啊救救孩子 项目GIT地址：https://gitee.com/yyytxxx/monorepo/tree/test/

补充 0801-1839：

PS：从代码库拉的代码如果直接在根目录下pnpm i 的话会导致 react-ts-app 中的react版本更到最新的即与ui-lib的版本一致（这种情况不会有问题）。只有他们的React的版本有差异才会出现上面多个实例的错误

# 在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

Answer 1

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']
        }
    }
})

Answer 2

把 react 和 react-dom 当成 monorepo 的共有依赖试试，别单独放在各个子项目里面