React Native 0.72 업그레이드 후 Metro bundler 캐시 이슈

문제 상황

프로젝트를 React Native 0.71에서 0.72로 업그레이드한 후 개발 서버 실행 시 다음 에러가 발생했다.

Error: Unable to resolve module @react-native/normalize-colors

기존에 잘 작동하던 코드였고, node_modules도 재설치했지만 동일한 에러가 반복됐다.

원인

React Native 0.72부터 Metro bundler의 캐시 처리 방식이 변경되면서, 기존 캐시와 새로운 의존성 구조가 충돌하는 것이 원인이었다. 특히 @react-native/ 스코프 패키지들이 내부 구조 개편으로 재구성됐다.

해결 방법

1. Metro 캐시 완전 삭제

rm -rf $TMPDIR/metro-* 
rm -rf $TMPDIR/haste-*
npx react-native start --reset-cache

2. Watchman 캐시 초기화

watchman watch-del-all

3. iOS의 경우 추가 작업

cd ios
rm -rf Pods Podfile.lock
pod install
cd ..

이후 정상적으로 빌드됐다.

추가 확인 사항

metro.config.js에서 resetCache 옵션을 활성화하면 개발 중 캐시 문제를 예방할 수 있다.

module.exports = {
  resetCache: true,
  // ...
};

다만 빌드 속도가 느려지므로 문제 해결 후에는 비활성화하는 것이 좋다.

결론

React Native 메이저 업그레이드 시에는 캐시 초기화를 기본으로 수행하는 것이 안전하다. 특히 0.72는 내부 패키지 구조가 많이 바뀌어서 더 주의가 필요했다.