🚨 Expo Web 500 에러 해결기: Babel 플러그인 호환성 문제

TL;DR: Expo Web에서 발생하는 500 에러는 react-native-reanimated/plugin과 Expo SDK 53 간의 호환성 문제였습니다. Babel 플러그인을 제거하여 해결했습니다.

📱 문제 상황

React Native 모노레포(Turborepo)에서 Expo 앱을 개발 중이었습니다. 앱은 모바일에서는 정상 작동했지만, Expo Web에서 500 에러가 계속 발생했습니다.

🔍 에러 메시지

[Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`.
It was moved to `react-native-worklets` package. Please use `react-native-worklets/plugin` instead.

ERROR index.ts: [BABEL] .plugins is not a valid Plugin property

🌐 실패하는 요청

...bundle?platform=web&...transform.routerRoot=app... returns 500 and JSON MIME type

🕵️ 문제 진단 과정

1단계: 일반적인 원인들 확인

처음에는 다음과 같은 일반적인 문제들을 의심했습니다:

• expo-router 설정 문제
• Metro 번들러 설정 문제
• 모노레포 구조 문제
• 웹 번들러 설정 문제

2단계: 설정 파일 분석

백업된 코드와 현재 코드를 비교 분석한 결과:

설정 파일	문제 상태	정상 상태
babel.config.js	plugins: ['nativewind/babel', 'react-native-reanimated/plugin']	plugins: []
package.json	복잡한 의존성 (nativewind, reanimated, tailwind)	간단한 기본 의존성
metro.config.js	모노레포 설정 있음	없음
app.json	"bundler": "webpack"	기본 웹 설정

3단계: 진짜 원인 발견

에러의 진짜 원인은 react-native-reanimated/plugin이었습니다!

🎯 문제의 핵심

Babel 플러그인 호환성 문제

• Reanimated v3.17.4와 Expo SDK 53 간의 호환성 문제
• 에러 메시지의 react-native-worklets 가이드는 잘못된 정보였음
• Reanimated v3.x에서는 여전히 react-native-reanimated/plugin 사용해야 함

잘못된 가이드의 함정

[Reanimated] Seems like you are using a Babel plugin `react-native-reanimated/plugin`.
It was moved to `react-native-worklets` package.

이 메시지는 오해의 소지가 있었습니다. 실제로는:

• Reanimated v4+에서만 react-native-worklets/plugin 사용
• Reanimated v3.x에서는 기존 플러그인 유지
• 하지만 Expo SDK 53과의 호환성 문제 존재

🔧 해결 방법

방법 1: Babel 플러그인 제거 (추천)

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [], // Reanimated 플러그인 제거
  };
};

방법 2: Reanimated 버전 업그레이드

# Reanimated v4+로 업그레이드
npx expo install react-native-reanimated@^4.0.0

# babel.config.js 수정
plugins: [
  'nativewind/babel',
  'react-native-worklets/plugin', // v4+용
]

방법 3: Expo SDK 다운그레이드

# Reanimated v3와 호환되는 Expo SDK로 다운그레이드
npx expo install expo@~52.0.0

📚 교훈 및 인사이트

1. 에러 메시지 신중하게 해석하기

• 공식 에러 메시지도 항상 정확하지 않을 수 있음
• 버전별로 다른 해결책이 필요할 수 있음
• 컨텍스트를 고려한 분석이 중요

2. 단계별 문제 해결의 중요성

• 복잡한 문제는 하나씩 제거하며 접근
• 설정 파일들을 하나씩 비교하며 분석
• 백업과 비교를 통한 정확한 진단

3. 모노레포에서의 주의사항

• 각 앱의 설정이 독립적으로 작동해야 함
• 공유 패키지와의 의존성 관리 중요
• 캐시 정리가 문제 해결의 핵심

🚀 예방 방법

1. 의존성 버전 관리

{
  "dependencies": {
    "expo": "~53.0.20",
    "react-native-reanimated": "~4.0.0" // 최신 버전 사용
  }
}

2. Babel 설정 최소화

// 필요한 플러그인만 사용
plugins: [
  'nativewind/babel', // NativeWind 사용 시에만
  // Reanimated는 필요할 때만 추가
];

3. 정기적인 업데이트

# 정기적으로 의존성 업데이트
npx expo install --fix
npm update

🔍 디버깅 체크리스트

500 에러가 발생할 때 다음을 확인하세요:

• Babel 플러그인 설정 확인
• Reanimated 버전과 Expo SDK 호환성 확인
• Metro 캐시 정리 (npx expo start -c)
• node_modules 재설치
• 설정 파일들 비교 분석
• 백업과 현재 상태 비교

💡 결론

이번 트러블슈팅을 통해 Babel 플러그인 호환성이 Expo Web 에러의 주요 원인임을 확인했습니다.

핵심 교훈:

1. 에러 메시지를 맹신하지 말고 컨텍스트를 고려하라
2. 복잡한 문제는 단계별로 접근하라
3. 백업과 비교를 통한 정확한 진단이 중요하다
4. 불필요한 Babel 플러그인은 제거하는 것이 안전하다

이 경험이 비슷한 문제를 겪는 개발자들에게 도움이 되길 바랍니다! 🎉

---

바이브코딩으로 초기 세팅할 때의 꿀팁! 초기 세팅에서 계속 에러가 난다면, 해당 라이브러리의 공식 문서를 첨부하면서 공식문서 검토 후 다시 작업 진행하도록 시키면 훨씬 정확도가 높아진다!