1. 오류 내용
최근 진행하는 프로젝트에서 turborepo 환경에 rn를 추가해야 할 일이 있어 프로젝트를 추가하고 빌드 테스트를 해보니 아래와 같은 오류가 계속 떴습니다. 처음에는 단순 패키지 누락 오류 메시지인 줄 알고 패키지를 계속 추가해주었는데, 계속해서 동일 오류가 발생하는 걸보고 이상을 느껴 동일 증상에 대해 검색을 해보니 pnpm + turborepo 환경에서는 rn 빌드 시 패키지 호이스팅이 재대로 이뤄지지 않는다는 내용을 확인할 수 있었습니다
- Unable to resolve module ‘…’ from …
- Cannot find module ‘…’
2. 원인
• pnpm의 기본 구조
pnpm은 기본적으로 의존성 격리(isolated mode) 방식을 사용한다고 합니다
패키지별로 node_modules가 분리되고, 루트에 모든 패키지가 flat하게 모여 있지 않습니다.
반면, React Native 생태계에서는 다음과 같은 특성이 있습니다:
- Metro bundler가 symlink 구조를 잘 처리하지 못함
- 네이티브 모듈(예: expo, react-native, @react-navigation/* 등)은 루트 node_modules에서 직접 접근 가능해야 함
- 모노레포 구조에서 workspace 간 참조가 많을 경우 경로 탐색이 복잡해짐
결과적으로, pnpm의 구조가 React Native가 지원하는 구조와 다르기 때문에 이와 같은 오류가 발생했던 겁니다
ps ) yarn 1 환경에서는 정상적으로 작동합니다.
3. 해결
→ .npmrc 설정
아래 설정을 추가해주어 빌드를 RN에 맞게 조정해주어 해결하였습니다.
//모든 패키지를 hoist 처리
shamefully-hoist=true
//linking를 hoisted로 변경
node-linker=hoisted
//expo 빌드에 필요한 파일들 호이스팅
public-hoist-pattern[]=*expo*
public-hoist-pattern[]=*react-native*
public-hoist-pattern[]=@react-navigation/*
public-hoist-pattern[]=@tanstack/*• shamefully-hoist=true
'오류해결' 카테고리의 다른 글
| [React-router-dom, History] window.history를 이용해 빈 페이지 뒤로가기 막기 (0) | 2025.01.30 |
|---|---|
| [React] Kakao Map Api - customoverlay 클릭 이벤트 오류 수정 (0) | 2024.09.14 |
| [클라우드 서비스, Ubuntu] 우분투 방화벽(ufw) 설정 오류(인스턴스 접속 불가) (0) | 2024.04.12 |