React-Native 번들 로드 실패 문제 해결

title_thumbnail(React-Native 번들 로드 실패 문제 해결)

Table of Contents

React-Native: 번들 로드 실패. 속성 ‘throwlfClosureRequired’를 읽을 수 없음

React Native 프로젝트를 실행할 때 “React-Native: 번들 로드 실패. 속성 ‘throwlfClosureRequired’를 읽을 수 없음”이라는 오류 메시지가 나타난다면 안심하세요. 이 오류는 특히 React Native 개발을 시작한 초보자들에게는 꽤 골치 아픈 문제일 수 있습니다.

다행히도 이 문제를 해결하기 위한 몇 가지 해결책이 이미 발견되었습니다. 아래에서 해당 해결책들을 살펴보세요:

해결책 1: “babel-preset-react-native” 버전 변경

이 오류를 해결하는 가장 일반적인 방법은 “babel-preset-react-native”의 버전을 “4.0.0”로 변경하는 것입니다. 최신 버전인 5.0.0에서 이 문제가 발생하는 것으로 보입니다. 이 해결책을 구현하려면 다음 단계를 따르세요:

{
  "devDependencies": {
    "babel-preset-react-native": "4.0.0"
  }
}

프로젝트의 package.json 파일에서 “babel-preset-react-native” 버전을 “4.0.0”로 지정하면 번들 로딩 문제를 해결할 수 있습니다.

해결책 2: 의존성과 개발 의존성 조정

첫 번째 해결책이 작동하지 않았다면, 프로젝트의 package.json 파일에서 의존성 및 개발 의존성을 조정하는 것이 또 다른 가능한 해결책입니다. 다음과 같이 수행할 수 있습니다:

{
  "dependencies": {
    "react": "16.5.0",
    "react-native": "0.57.1"
  },
  "devDependencies": {
    "babel-preset-react-native": "4.0.0",
    "metro-react-native-babel-preset": "0.45.6"
  }
}

“babel-preset-react-native” 버전을 “4.0.0”으로 추가하고 “metro-react-native-babel-preset”도 해당 버전과 함께 포함되도록 해야합니다. 이 조정을 통해 마주한 오류를 해결할 수 있을 것입니다.

해결책 3: React Native 및 metro-react-native-babel-preset 업데이트

React Native 및 metro-react-native-babel-preset의 이전 버전을 사용중이라면, 최신 버전으로 업데이트하는 것이 해결책일 수 있습니다. 다음은 업데이트하는 방법의 예시입니다:

{
  "dependencies": {
    "react-native": "0.57.7"
  },
  "devDependencies": {
    "metro-react-native-babel-preset": "0.48.5"
  }
}

버전을 업데이트한 후 프로젝트를 다시 실행해보고 번들이 예상대로 로드되는지 확인해보세요.

해결책 4: 캐시 지우기 및 의존성 재설치

일부 경우에는 캐시를 지우고 의존성을 재설치하는 것으로 “Failed to load bundle” 오류를 해결할 수도 있습니다. 다음 단계를 따라 진행하세요:

rm -rf node_modules
npm install

node_modules 디렉토리를 제거하고 의존성을 재설치함으로써 잠재적인 충돌 없이 신선한 설치를 보장할 수 있습니다.

아마도 이러한 해결책 중 하나가 작동하여 “Failed to load bundle” 오류를 해결할 수 있었을 것입니다. 오류 해결은 개발 과정에서 흔한 일부이므로 끈기를 가지고 어떤 도전이든 극복할 수 있을 것입니다.

참고 자료 :

reactjs