Error: [Reanimated] Failed to create a worklet.

[Saurabh-iMark]

ERROR Error: [Reanimated] Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#failed-to-create-a-worklet for more details., js engine: hermes

This error comes again and again after installing both packages(reanimated, gesture handler):

Package.json->
"dependencies": {
"@react-navigation/bottom-tabs": "^6.5.11",
"@react-navigation/drawer": "^6.6.6",
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.17",
"axios": "^1.6.2",
"deprecated-react-native-prop-types": "^2.2.0",
"react": "18.2.0",
"react-native": "0.73.0",
"react-native-encrypted-storage": "^4.0.3",
"react-native-gesture-handler": "^2.14.0",
"react-native-image-crop-picker": "^0.40.2",
"react-native-reanimated": "^3.6.1",
"react-native-safe-area-context": "^4.8.1",
"react-native-screens": "^3.29.0",
"react-native-select-dropdown": "^3.4.0",
"react-native-swiper": "^1.6.0",
"react-native-vector-icons": "^10.0.3"
},

babel.config.js->
module.exports = {
presets: ['module:@react-native/babel-preset'],
this.plugins: ['react-native-reanimated/plugin']
};

Does anybody know how to fix it, I'm stuck here, Thanks in advance!

[MatiPl01]

Hi! Have you written some code that uses reanimated or you get this error just after installing reanimated and gesture handler?

If this is your babel.config.js:

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

Please try to remove the this. prefix from the plugins property. This is likely the cause of your problem. The config should look like this:

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

[ErMapsh]

I tried but its not woking

[MatiPl01]

Hey!
Sorry for the late response. Would you be able to prepare a repro so that I can test on my side and see why you are getting this error?
Do you see this error after setting up the clean project?

[ErMapsh]

never mind, my issue is solved somehow, I don't remember now also. Thank you for asking.

[singhJasvinder101]

Hi @ErMapsh do you remember the solution ?? I am getting this same error in react native v0.75 and react native reanimated v3.15

or @MatiPl01 you can also suggest the solution please

[devzaveri]

just do rebuild after added this pluging and type this npm run start -- --reset-cache it will solve

[ErMapsh]

"react-native-reanimated": "~3.10.1" Try to use this version of the package and reset the transform cache                                                                  

   npm run start -- --reset-cache

[singhJasvinder101]

[singhJasvinder101]

Getting error in react-nativer-reanimated version 3.15 and react-native cli version 0.75

babel.config.js file if there is something incorrect

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ["react-native-auto-route/plugin", { appDirectory: "src" }],
    "nativewind/babel",
    'react-native-reanimated/plugin'
  ],
};

package.json

{
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-native-fontawesome": "^0.3.2",
    "@react-native-community/blur": "^4.4.0",
    "nativewind": "^2.0.11",
    "react": "18.3.1",
    "react-native": "0.75.2",
    "react-native-blurhash": "^2.0.3",
    "react-native-gesture-handler": "^2.18.1",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-loader-kit": "^2.0.8",
    "react-native-paper": "^5.12.5",
    "react-native-reanimated": "^3.15.0",
    "react-native-safe-area-context": "^4.10.9",
    "react-native-screens": "^3.34.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^15.6.0",
    "react-native-track-player": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.25.4",
    "@react-native/babel-preset": "0.75.2",
    "@react-native/eslint-config": "0.75.2",
    "@react-native/metro-config": "0.75.2",
    "@react-native/typescript-config": "0.75.2",
    "@types/react": "^18.2.6",
    "@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-native-auto-route": "^0.3.3",
    "react-test-renderer": "18.3.1",
    "tailwindcss": "^3.3.2",
    "typescript": "5.0.4"
  }
}

I researched about error go through the documentation applied all solutions

1. keeping this in babel.config.js
2. position should be last

[MatiPl01]

Hey @singhJasvinder101!

Your babel config looks correct.

Do you see this error after starting the project or after adding some specific code? If you see error after adding code that uses reanimated, could you please share the code snippet.

Are you developing the app on android using a computer with windows? I am judging that based on your error stack trace you pasted in the comment above. When you saw this error? When you tried to install the older reanimated version or in some other case?

[singhJasvinder101]

Its working now after clearing metro cache

[MatiPl01]

Nice! Thanks for letting me know.

[ErMapsh]

Its working now after clearing metro cache

That's great

[MasayumeKTYA]

thanks! this is caching issue!!

[MatiPl01]

Since this issue turned out to be a config setup or metro cache problem, I will close the discussion.
If someone else encounters the same issue, don't hesitate to reopen this discussion or open a new one and ask.

[deskofnia]

Here is my package version

"dependencies": {
    "@react-navigation/drawer": "^6.7.2",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.10.1",
    "react": "18.2.0",
    "react-native": "0.74.3",
    "react-native-gesture-handler": "^2.19.0",
    "react-native-permissions": "^4.1.5",
    "react-native-reanimated": "^3.14.0",
    "react-native-safe-area-context": "^4.10.8",
    "react-native-screens": "^3.32.0",
    "react-native-vector-icons": "^10.1.0"
  }

This is my babel.config.js

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

I added

const config = {
    resetCache: true
};

in metro.config.js and 'react-native-reanimated/plugin' in babel.config.js and then running npm start -- --reset-cache solved the issue in my case.

[devshrish]

thanks bro.. its working

[Menzen20]

Thanks woked for me as well!

[AhmedSaeed456]

Thanks worked for me too

[MattEhrlich]

This worked for me as well. You have to manually add it to the plugins array.

[cyan-hu]

Thank you bro , this worded for me

[vinayagamEprm]

im also having the issue?

"react-native-reanimated": "^3.14.0",

and i have added the
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
'react-native-reanimated/plugin',
],
}
to the babel.congif

TypeError: Cannot read property 'isConfigured' of undefined
im getting this error

[MatiPl01]

Could you please share some more details? Ideally, you could create a repository with a reproducible example. Your config looks fine so I can't say what is wrong just based on it.

[vinayITT]

For me this issue came when I added react-native-svg in RN CLI project.
I installed react-native-reanimated first and then added react-native-svg, the issue popped up while running the project.

[MatiPl01]

@vinayITT Can you please tell me which versions of libraries you used? Did you see the error while running a clean project or you started seeing the issue after adding some code?

[vinayITT]

@MatiPl01 I encountered an issue while running the project, even though I wasn't using it anywhere in the code. It was quite strange! I ended up restarting my system and reinstalling everything, and now it is working fine. I suspect it was a caching issue.

1. I added the following to my babel.config.js: plugins: ['react-native-reanimated/plugin']
2. I then restarted my system.
3. Then I did: npm i react-native-reanimated if you are using yarn you can use yarn add react-native-reanimated
4. After that I ran :
   npm run start -- --reset-cache or if you are using yarn you can use yarn start --reset-cache

[MatiPl01]

Yeah, sometimes you just have to reset cache after installing packages. Good to hear that you managed to solve it.

[ramchandru97]

ERROR Error: [Reanimated] Failed to create a worklet. See https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#failed-to-create-a-worklet for more details., js engine: hermes

getting this error and i've tried metro reset-cache but still i'm facing this issue

babel.config.js:
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: ["nativewind/babel", 'react-native-reanimated/plugin']
};

"react-native-gesture-handler": "^2.20.0",
"react-native-reanimated": "^3.16.1",

[MatiPl01]

Hey @ramchandru97!

Your configuration looks correct. Could you possibly create a repository with the repro and share it with me?

Could you also tell me if you encountered this issue after creating a new project or upgrading reanimated/gesture handler in the existing project? If it is the new project, can you tell me how you used reanimated or share a code snippet which causes this error?

[zubyrbutt]

I've fixed this issue by adding in metro.config.js const config = { resetCache: true // this worked for me };

Here is the my versions:

react-native-reanimated: ^3.16.6
react-native-gesture-handler: 2.21.2

This is my babel.config.js

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

In my metro.config.js i've added this. resetCache: true

`const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = {
resetCache: true // this worked for me
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
`

[suryahota1]

Adding react-native-reanimated/plugin into the plugins of babel config and running metro by resetting cache, fixed the issue for me.

[sumanbiswas1994]

I have Solved My Problem just put the below code inside the metro.config.js
const config = {
resetCache: true
};

[MatiPl01]

Yeah, it does the same as the --reset-cache flag provided when starting a metro client from the console.

[ucheNkadiCode]

For some reason my solution was to run npm start -- --reset-cache which is somehow different than npm start --reset-cache

I am currently on react 79.1 and reanimated 3.17.4

[tomekzaw]

You need to use either yarn start --reset-cache (without --) or npm start -- --reset-cache (with -- in the middle).

[zhaoaixu520]

I'm facing the same issue
"react-native": "0.80.0",
"react-native-reanimated": "next",
"react-native-worklets": "^0.3.0",

babel.config.js
plugins:['react-native-worklets/plugin']
refer to doc