I am trying to install react 18 (I need this version) in one of the monorepo project while the other project has to use react 16. The problem is that both react version get hoisted to the root node_module like this, causing the app web to crash since it is not react 18 compatible and it for some reason chooses the 18 version. The app fails with following error
TypeError: Cannot read properties of null (reading 'useRef')
at Object.useRef (/Users/joe-doe/customer/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.development.js:1630:21)
but it should never try to use react 18 in the first place...
.
└── customer
├── apps/
│ ├── web
│ │ └── package.json <-- here react 16
│ └── widget
│ └── package.json <-- here react 18
├── package.json <-- here just stuff TS, eslint
└── node_modules
└── .pnpm
├── ... lot of stuff
├── [email protected]
└── [email protected]
I have read about pnpm hoisting here https://pnpm.io/npmrc#hoist-pattern
This is my .npmrc file at the moment
strict-peer-dependencies=false
auto-install-peers=false
resolution-mode=highest
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
public-hoist-pattern[]=@types*
I have tried to add following lines (one at the time) which I think would help me solve my problem (do not link the react 18, or any react, to the root node_module)
hoist-pattern[][email protected]
hoist-pattern[]=!react
hoist-pattern[]=!*react*
public-hoist-pattern[][email protected]
public-hoist-pattern[]=!react
public-hoist-pattern[]=!*react*
how can I stop pnpm installing two react versions in the root node_modules? I do not really want to use node-linker=hoisted
pnpm version 8.6.11 node version 18.17.0 turbo version 1.6.3