Multiple React versions in a monorepo, is it possible?

Question

I have this monorepo, built using npm workspaces:

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

I want to update Web to React 18 while leaving App at React 17

Currently (and working), my dependencies are:

├─ 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

After I attempt to split versions, my dependencies are now:

├─ 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

This results in the old favourite:

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)

Which I think is caused by ./node_modules/react-dom@17 clashing with ./src/web/node_modules/react@18

Is what I want to achieve even possible?

Answer 1

The answer is to use overrides, which has been available since npm 8.?.?. I add the question marks as I'm not sure exactly when it appeared, but it does not work on earlier iterations of version 8. It certainly works on 8.5.5

package.json

{
    ....
    "overrides": {
        "App": {
            "react": "17.0.0"
        },
        "Web": {
            "react": "18.0.0"
        }
    }
}

$ npm ls react

mono@1.0.0 /dev/mono
├─┬ app@0.0.1 -> ./app
│ └── react@17.0.0
├─┬ web@0.0.1 -> ./web
│ └── react@18.0.0
...

One thing to note is that this will affect nested dependencies too. You could extend the overrides to retain the other versions by extensively specifying every version for every affected dependency, but I have had no issues without this so far, except for the repeated warnings generated by npm ls react, eg:

├─┬ @testing-library/react@12.1.5
│ ├─┬ react-dom@16.14.0
│ │ └── react@17.0.2 deduped invalid: "^16.14.0" from node_modules/react-dom
│ └── react@17.0.2 deduped