shared패키지의 peerDepdencies에 18 || 19로 설정한 이후 발생한 react 이중 인스턴스 문제

문제 상황

E2E테스트 과정에서 Target page, context or browser has been closed 에러 발생

원인 추정

1. 이전 PR에서 shared패키지의 peerDependencies에 19를 추가함(expo SDK54는 react@19를 필요로 함)

   "peerDependencies": {
   	"react": "^18.0.0 || ^19.0.0",
   	"react-dom": "^18.0.0 || ^19.0.0"
   },

2. 루트에 react@18을 설치해서 next 등 react를 peerDepdencies로 필요로하는 패키지에서 18버전을 사용하도록 해서 의존성 충돌 문제를 해결

3. shared에서 expoSDK 54를 위해 18||19로 설정해두었고, pnpm은 이 peerDep을 자동으로 설치한다.(auto-install-peers)

4. 루트에는 이미 18버전이 있기에, 19를 별도로 shared/node_modules에 설치한다.

5. vite가 shared패키지를 빌드할 때 Node Resolution에 따라 shared/node_modlues/react@19발견 → 이를 사용

6. 다른 패키지에서는 react@18을 사용함

7. 18과 19 버전이 런타임 크러시

원인

shared패키지의 lockfile에서 react@19로 해석되어 익스텐션의 react@18과 이중 인스턴스 충돌이 발생한 것

해결 방법

vite base config에 resolve.deupe:[”react”,”react-dom”]을 추가해서 react를 단일 버전으로 통합하도록 해서 해결

• vite - resolve.dedupe: 프로젝트 루트에서 가장 가까운 하나의 react만 resolve

이를 근본적으로 해결하기 위한 방법

1. .npmrc에 resolve-peers-from-workspace-root=true 추가

   peerDep을 루트 의존성(react@18)으로 강제 resolve → apps/app은 직접 의존성이라 react@19 유지됨

   • resolve-peers-from-workspace-root=true: 루트의 의존성이 각 패키지의 peerDepdencies을 resolve하는데 사용된다.

2. shared의 peerDep을 18로 좁히기