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?

Chuu

Hi! Any update for this? I am having the exact same problem, even if the two packages are independent. Please let me know – Clow

Hi @ErnestoStifano, apologies I didn't see your comment. I'm sure you have solved this by now, but if not I have added the answer below 🙂 – Chuu

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

[email protected] /dev/mono
├─┬ [email protected] -> ./app
│ └── [email protected]
├─┬ [email protected] -> ./web
│ └── [email protected]
...

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/[email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped invalid: "^16.14.0" from node_modules/react-dom
│ └── [email protected] deduped

Chuu

Would this work with NPM workspaces? I'm facing a similar problem at the moment with 2 of my NPM workspaces that use different React versions, and I haven't found any solution yet. – Leg

@JPStrydom that is exactly what I am using. – Chuu

NPM version 8.3.0 introduced overrides – Cardholder

why is this voted down? – Sniperscope

What about for yarn workspaces? – Amphiboly

for yarn workspace you can do "resolutions": { "packages/App/react": "17.0.0", "packages/Web/react": "18.0.0" } – Complot

For anyone coming in late to this, I asked this in 2022. The above did work but we found it to be a constant battle. We were in the process of switching over to pnpm which I believe can handle this scenario better but the company made the tech team redundant so there was no further progress. – Chuu