Property '_WORKLET' doesn't exist

[zain-khalid]

Description

Property '_WORKLET' doesn't exist

Steps to reproduce

1. Initiate RN project with version "0.78.0"
2. install "react-native-reanimated" with version "4.0.0-beta.2"
3. On any usage of this package the issue triggers

Snack or a link to a repository

https://snack.expo.io/

Reanimated version

4.0.0-beta.2

React Native version

0.78.0

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 16 Pro

Acknowledgements

Yes

[MatiPl01]

Reanimated doesn't support RN 0.78 yet. I close this issue as it is a duplicate of #7061

[kirx76]

still have a problem with that, checked on 3.17.1

[MatiPl01]

Hey @kirx76! Could you possibly prepare a reproduction example or share the repository if possible? It is hard to help you without knowing your setup.

[amthirukumaran]

im also facing this issue on rn 0.77.0 version , im seeking for help from this

[MatiPl01]

I think that this may be related to other issues that people are experiencing on RN 0.78 and React 19. We also had multiple problems with worklets initialization caused by an invalid monorepo state. For my case, adding this config in package.json of apps nested in the monorepo fixed the issue:

"installConfig": {
  "selfReferences": false
}

If you guys don't use a monorepo or experience these problems on a clean project, please prepare a repository and share it with me so that I would be able to open the project and see what is wrong. Alternatively, you can provide a detailed description of your project setup.

[amthirukumaran]

this is my package.json file { "name": "tashi", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/datetimepicker": "^8.3.0", "@react-navigation/native": "^7.0.14", "@react-navigation/stack": "^7.1.1", "@rneui/base": "^4.0.0-rc.8", "@rneui/themed": "^4.0.0-rc.8", "react": "18.3.1", "react-native": "0.77.0", "react-native-splash-screen": "^3.3.0", "zen-core-elements": "file:zen-core-elements-0.0.1.tgz", "@react-native-clipboard/clipboard": "^1.14.1", "react-native-gesture-handler": "^2.16.2", "react-native-reanimated": "3.10.1", "react-native-safe-area-context": "^4.10.4", "react-native-vector-icons": "^10.1.0", "react-native-webview": "^13.10.3" }, "devDependencies": { "@babel/core": "^7.25.2", "@babel/preset-env": "^7.25.3", "@babel/runtime": "^7.25.0", "@react-native-community/cli": "15.0.1", "@react-native-community/cli-platform-android": "15.0.1", "@react-native-community/cli-platform-ios": "15.0.1", "@react-native/babel-preset": "0.77.0", "@react-native/eslint-config": "0.77.0", "@react-native/metro-config": "0.77.0", "@react-native/typescript-config": "0.77.0", "@types/jest": "^29.5.13", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } and this is my pack's package.json { "name": "zen-core-elements", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-clipboard/clipboard": "^1.14.1", "@react-native-community/voice": "^1.1.9", "color": "^4.2.3", "formik": "^2.4.6", "lottie-react-native": "^6.7.2", "moment": "^2.30.1", "react-native-blob-util": "^0.19.11", "react-native-calendars": "^1.1305.0", "react-native-crypto-js": "^1.0.0", "react-native-date-picker": "^5.0.4", "react-native-document-picker": "^9.3.0", "react-native-gesture-handler": "^2.16.2", "react-native-image-picker": "^7.1.2", "react-native-pell-rich-editor": "^1.9.0", "react-native-popover-view": "^5.1.8", "react-native-reanimated": "^3.12.0", "react-native-safe-area-context": "^4.10.4", "react-native-share": "^10.2.1", "react-native-svg": "^15.3.0", "react-native-toast-message": "^2.2.0", "react-native-vector-icons": "^10.1.0", "react-native-webview": "^13.10.3", "yup": "^1.4.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.84", "@react-native/eslint-config": "0.74.84", "@react-native/metro-config": "0.74.84", "@react-native/typescript-config": "0.74.84", "@types/color": "^3.0.6", "@types/react": "^18.2.6", "@types/react-native-crypto-js": "^1.0.3", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "peerDependencies": { "react": "19.0.0", "react-native": "0.78.0" }, "engines": { "node": ">=18" } }

[MatiPl01]

@Kumaranclickz You use incompatible version of reanimated. For RN 0.77 you would have to use 3.16.7 or newer. Please look at this compatibility table: https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/

[amthirukumaran]

Eventhough im using 3.17.1 i got the same issue

[MatiPl01]

Eventhough im using 3.17.1 i got the same issue

Maybe you are missing a reanimated babel plugin which is required? You can also add --reset-cache flag when starting a metro bundler as something might be incorectly cached.

[amthirukumaran]

Yeahh i added bable plugin and restart my metro using reset command but it doesn't work for me

[MatiPl01]

Is it possible that you share your repository or create a repo for reproduction? I have run out of ideas and don't know what else I can suggest. It looks like an issue with configuration on your side but it is hard to tell what is wrong.

[amthirukumaran]

Yeahh i invited you to my repo

[MatiPl01]

Yeahh i invited you to my repo

Problems with npm installation

I couldn't get dependencies installed right with npm. I had to remove your package-lock.json and install node modules with --force flag to, at least, finish installation without error. In the end, the app showed errors after building (in my case related to the react-native-screens library), because dependencies weren't installed properly.

Stack trace of error I was getting

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @rneui/[email protected]
npm ERR! Found: @rneui/[email protected]
npm ERR! node_modules/@rneui/base
npm ERR!   @rneui/base@"^4.0.0-rc.8" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @rneui/base@"4.0.0-rc.7" from @rneui/[email protected]
npm ERR! node_modules/@rneui/themed
npm ERR!   @rneui/themed@"^4.0.0-rc.8" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: @rneui/[email protected]
npm ERR! node_modules/@rneui/base
npm ERR!   peer @rneui/base@"4.0.0-rc.7" from @rneui/[email protected]
npm ERR!   node_modules/@rneui/themed
npm ERR!     @rneui/themed@"^4.0.0-rc.8" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/mateu/.npm/_logs/2025-03-05T21_14_10_084Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/mateu/.npm/_logs/2025-03-05T21_14_10_084Z-debug-0.log

Installation with yarn

I tried using yarn. After finishing these steps, the app started running without errors:

1. Remove package-lock.json
2. Install dependencies with yarn package manager (you can just use the yarn command)
3. Run yarn start to start the metro bundler
4. Build the app (either from terminal or from Android Studio / Xcode - for iOS)

Example recording

https://github.com/user-attachments/assets/b6356acf-58e4-4a45-8bb8-28149b83273c

Please let me know if it helps. I don't know why dependencies cannot be installed properly with npm but I am using yarn daily as it seems to deal better with dependency resolution.

[amthirukumaran]

sorry i forgot to tell i just commented the line which triggers error you should uncomment the line and run which throws the error "Poperty 'WORKLET' doesn't exists"

--> tashi\node_modules\zen-core-elements\src\elements\zenCountDownTimer\CircularTimer.tsx

// const AnimatedCircle = Animated.createAnimatedComponent(Circle); // const AnimatedText = Animated.createAnimatedComponent(Text);

[MatiPl01]

@Kumaranclickz I uncommented these lines and nothing crashes. Can you please prepare a reproduction repository that wouldn't require any manual changes after cloning or describe what should I change and what to press in the app step-by-step so that I can have the same working environment as you?

Ideally, you can just record what you do from the moment when you clone the repository to the moment you see this error.

[amthirukumaran]

if i use react-native-reanimated@^3.17.1 i got "Property 'WORKLET' doesn't exists" error if i use [email protected] it will not throw any errors

[MatiPl01]

I've just checked and I have [email protected] installed in your cloned repo. I don't know if I have to do other changes than just uncommenting these 2 lines in node modules to make it crash? Do you encounter this error right after opening the app or after doing some action like pressing on something animated, etc.?

Please add a recording showing what you do step by step or describe all steps from cloning the repo to opening the app (which commands you use to install dependencies, how you build and start the app, what other manual changes you do to your code).

Without such information I cannot give you any help, because the app doesn't crash on my side and I don't know how I should test it.

[gigby]

For me it's was cache issue. Clearing bundler cache helped.

[praveen3245]

facing same issue on "react-native-reanimated": "^3.17.0" and "react-native": "^0.75.0",

[tomekzaw]

This error occurs if you're missing Babel plugin.

Please add Babel plugin according to the instructions in the docs: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin

Don't forget to clear Metro bundler cache with yarn start --reset-cache or npm run start -- --reset-cache.

[empro-narendervaddepelly]

I got the same error cause I didn't follow the instructions from here Step 2: Add Reanimated's babel plugin

Then it worked 😅

[alphamaleengineer]

@MatiPl01 When do you plan to support version 0.79.1? I started a new project, connected the library and surprise... My problem of course, but maybe someone knows where I can look at this?

[MatiPl01]

@MatiPl01 When do you plan to support version 0.79.1? I started a new project, connected the library and surprise... My problem of course, but maybe someone knows where I can look at this?

Nothing broke in RN 0.79.1 and Reanimated already supports this version.

Your problem is very likely related to the incorrect setup. Have you added the required babel plugin? Have you followed a suggestion from the comment above?

[alphamaleengineer]

@MatiPl01

Yeah, I don't know what I did, something must have gotten stuck in the cache. I just rebuilt the app a few times and it worked as expected, thanks for the work.

[web-copilot]

I am getting this issue when I am opening keyboard on a screen which is in stackNavigator but that screen is opened from DrawerNavigator.

[DCWSubhranshu]

I am also getting the same error

import React, { useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Camera, useCameraDevice, useCameraPermission, useFrameProcessor } from 'react-native-vision-camera';
import { runOnJS } from 'react-native-reanimated';

const CameraScreen = () => {
  const device = useCameraDevice('front');
  const { hasPermission, requestPermission } = useCameraPermission();

  useEffect(() => {
    if (!hasPermission) {
      requestPermission();
    }
  }, [hasPermission, requestPermission]);

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    if (!_WORKLET) throw new Error('Not on UI thread!')
    runOnJS(console.log)('Frame received');
  }, []);

  if (!device) return <Text>Loading camera...</Text>;
  if (!hasPermission) return <Text>No camera permission</Text>;

  return (
    <View style={styles.container}>
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true}
        frameProcessor={frameProcessor}
        frameProcessorFps={5}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default CameraScreen;  

babel.config.js

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

package.json

{
  "name": "FaceRecognizerApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "android:clean": "rm -rf android/.gradle android/build && cd android && ./gradlew clean"
  },
  "dependencies": {
    "react": "19.0.0",
    "react-native": "0.79.2",
    "react-native-reanimated": "^3.18.0",
    "react-native-vision-camera": "^4.6.4",
    "react-native-worklets-core": "^1.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "18.0.0",
    "@react-native-community/cli-platform-android": "18.0.0",
    "@react-native-community/cli-platform-ios": "18.0.0",
    "@react-native/babel-preset": "0.79.2",
    "@react-native/eslint-config": "0.79.2",
    "@react-native/metro-config": "0.79.2",
    "@react-native/typescript-config": "0.79.2",
    "@types/jest": "^29.5.13",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

[MatiPl01]

@DCWSubhranshu Have you followed all of the instructions mentioned in this comment? This issue usually happens due to invalid configuration on the developer side and is not an issue related to the library itself.

[DCWSubhranshu]

@DCWSubhranshu Have you followed all of the instructions mentioned in this comment? This issue usually happens due to invalid configuration on the developer side and is not an issue related to the library itself.

Yes i did as directed in babel.config.js but the issue persists i even wrapped the metro . here is the repo if you want to check it https://github.com/DCWSubhranshu/WorkletTest enable test mode to bypass bluetooth setup

[MatiPl01]

Hey @DCWSubhranshu!

When do you see this error? I've just built the app on iOS and Android and were able to run reanimated animations with no issues. Maybe try cleaning up the project, resetting metro cache and seeing if it works?

[DCWSubhranshu]

Hey @DCWSubhranshu!

When do you see this error? I've just built the app on iOS and Android and were able to run reanimated animations with no issues. Maybe try cleaning up the project, resetting metro cache and seeing if it works?

while the vision camera is open and a face is detected after selecting a bus number . i have cleaned metro-cache still the issue is there do i need to create a new project . @MatiPl01 you do have to select a bus number to check the screen out . it is happening while trying to use runOnJs