monorepo 中有多个 React 版本，有可能吗？答案

【问题标题】：Multiple React versions in a monorepo, is it possible?monorepo 中有多个 React 版本，有可能吗？
【发布时间】：2022-06-26 17:43:34
【问题描述】：

我有这个使用 npm 工作区构建的 monorepo：

├─ lib
│  └─ Foo
└─ src
   ├─ App
   └─ Web

我想将 Web 更新为 React 18，同时将 App 留在 React 17

目前（并且正在工作），我的依赖项是：

├─ lib
│  └─ Foo
├─ src
│  ├─ App
│  │   ├─ node_modules     << no react
│  │   └─ package.json     << no react 
│  └─ Web
│      ├─ node_modules     << no react
│      │   └─ next@18 
│      └─ package.json     << no react 
├─ node_modules  
│      ├─ bar@1            << peerDep: react ^17              
│      ├─ react@17    
│      └─ react-dom@17    
└─ package.json            << react & react-dom 17

尝试拆分版本后，我的依赖项现在是：

├─ lib
│  └─ Foo
├─ src
│  ├─ App
│  │   ├─ node_modules     << no react
│  │   └─ package.json     << react & react-dom 17
│  └─ Web
│      ├─ node_modules     
│      │   ├─ next@12    
│      │   ├─ react@18    
│      │   └─ react-dom@18 
│      └─ package.json     << react & react-dom 18 
├─ node_modules            
│      ├─ bar@2            << peerDep: react >=17              
│      ├─ react@17    
│      └─ react-dom@17    
└─ package.json            << no react

这导致了旧的最爱：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useState')
    at useState (/src/web/node_modules/react/cjs/react.development.js:1620:21)
    at AppContextProvider (webpack-internal:///./node_modules/bar/AppContextProvider/AppContextProvider.js:25:66)
    at processChild (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
    at resolve (/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at Object.renderToString (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at Object.renderPage (/node_modules/next/dist/server/render.js:804:45)
    at Object.defaultGetInitialProps (/node_modules/next/dist/server/render.js:391:51)

我认为是由 ./node_modules/react-dom@17 与 ./src/web/node_modules/react@18 冲突引起的

我想要实现的目标有可能吗？

【问题讨论】：

嗨！这有什么更新吗？即使两个包是独立的，我也遇到了完全相同的问题。请告诉我

标签： javascript reactjs npm npm-workspaces

【解决方案1】：

看看这里 - 简而言之，您可以在 package.json 中使用“nohoist”或“reverse”作为键 https://medium.com/trabe/fine-tune-dependency-versions-in-your-javascript-monorepo-1fa57d81a2de

【讨论】：