[react-native / 리액트 네이티브]ERROR Error: [Reanimated] Mismatch between JavaScript code version and Reanimated Babel plugin version (3.5.3 vs. 3.4.2) 에러

ERROR  Error: [Reanimated] Mismatch between JavaScript code version and Reanimated Babel plugin version (3.5.3 vs. 3.4.2).
See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-code-version-and-reanimated-babel-plugin-version` for more details.
Offending code was: `function anonymous(){const{createLayoutAnimationManager}=this._closure;global.LayoutAnimationsManager=createLayoutAnimationManager();}`, js engine: hermes
 LOG  Running "projectapp" with {"rootTag":1,"initialProps":{}}
 ERROR  Invariant Violation: "project" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

 

원인

• Reanimated의 버전 불일치: JavaScript 코드와 Reanimated의 Babel 플러그인 사이의 버전이 일치하지 않을 때 발생합니다. Reanimated 2와 같은 라이브러리는 많은 Babel 변환을 사용하기 때문에 코드와 플러그인의 버전이 정확히 일치해야 합니다.
  • 그런데 내 babel.config 는 문제가 없어 보였다

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

 

• AppRegistry 오류: 이 오류는 일반적으로 앱의 엔트리 포인트(예: index.js)에서 앱 컴포넌트가 올바르게 등록되지 않았을 때 발생합니다. 또는 Metro 번들러가 올바르게 시작되지 않았거나 필요한 모듈을 찾지 못했을 때도 발생할 수 있습니다.

해결

$ npx react-native start --reset-cache

• 오래된 또는 잘못된 버전의 코드나 라이브러리가 캐시에서 사용되는 것을 방지
• 모든 모듈 및 의존성이 올바르게 다시 로드 및 처리
• Metro 번들러의 캐시를 정리해 주었다.