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 ponent. 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  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?

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 ponent. 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/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?

• javascript
• reactjs
• npm
• npm-workspaces

• 2 Hi! Any update for this? I am having the exact same problem, even if the two packages are independent. Please let me know – Ernesto Stifano Commented Jun 16, 2022 at 11:42
• Hi @ErnestoStifano, apologies I didn't see your ment. I'm sure you have solved this by now, but if not I have added the answer below