react-native-reanimated: Mismatch between JavaScript code version and Reanimated Babel plugin version

Description

Getting the error: [Reanimated] Mismatch between JavaScript code version and Reanimated Babel plugin version (3.3.0 vs. undefined) consistently when running on Android and iOS in Dev (Note, build is successful on both platforms - However running is when the error occurs).

I checked the babel plugin and it is correctly fetching the version from the package.json. It’s also correctly assigning the __version value to most function/objects

I did some digging and found that when attempting to register the event handler onGestureHandlerStateChange (/platform-specific/core.ts:127) it throws the error due to 4 functions/objects that aren’t being “workletized” via the babel plugin:

onStart
handlers
_closure
eventHandler

Release builds crash immediately on boot, however that could be something different entirely, and investigation has come up short.

I’ve been searching around on this problem for what feels like an eternity now and I can’t for the life of me figure out what’s causing it.

Steps to reproduce

Start metro with a cleaned cache
Open the app
Wait for the bundle to load
Immediately get the error

Snack or a link to a repository

Private Repository

Reanimated version

3.3.0

React Native version

0.72.0

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

About this issue

Original URL
State: closed
Created a year ago
Comments: 15 (2 by maintainers)

Commits related to this issue

Throw error when worklet version is unknown (#4749) <!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the rev... — committed to software-mansion/react-native-reanimated by tomekzaw a year ago
* fix https://github.com/software-mansion/react-native-reanimated/issues/4736 — committed to rvgroup/react-native-reanimated-carousel by rvgroup 4 months ago

Most upvoted comments

I’ve gone through some of the dependencies and found an issue thread in the react-native-reanimated-carousel Github which solves this problem for me.

For anyone facing the same problem, running this command did the trick for me: rm -rf node_modules && npm cache clean --force && npm install && watchman watch-del-all && rm -rf $TMPDIR/haste-map-* && rm -rf $TMPDIR/metro-cache then running react-native start --reset-cache

It seems it was a caching problem, I just wasn’t able to bust the cache properly in my previous attempts 😬

+33

Andrerm124 on Jul 18, 2023

try to start the metro bundler with --reset-cache switch

+16

efstathiosntonas on Jul 14, 2023

@efstathiosntonas I’ve tried every possible way of clearing caches that I can think of. So far nothing has worked 😬

Andrerm124 on Jul 14, 2023

try to start the metro bundler with --reset-cache switch

this worked for me, thanks

dennis-gonzales on Sep 21, 2023

I found that react-native-reanimated-carousel using dependency “babel-plugin-module-resolver”: “4.1.0”. Updating this to version “5.0.0” and running “yarn start --reset-cache” make the mismatch error disappeared

CannyDanny on Nov 14, 2023

uninstall the app from the device/emulator and run command npm start --reset-cache

FouadMagdy01 on Sep 17, 2023

I often run into something similar meaning I need to rebuild my pods with yarn expo run:ios before yarn expo start will start working again. Sometimes I have to rm -rf ios and/or use yarn expo start -c as well.

derek-primumco on Sep 30, 2023