Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? #1875

anujraghuvanshi · 2021-03-29T00:10:05Z

Description

Getting Issue in build compilation- Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? when "react-native-reanimated": "^2.0.1" is installed.

Expected behavior

It should keep the build running as it do for previous versions

Actual behavior & steps to reproduce

I've Installed the latest version of plugin & and working in project created with latest React Native and getting issue.

Snack or minimal code example

package installation is throwing issue so,not any example code here.

Package versions

React Native -
react-native-reanimated -

React Native: 0.64.0
React Native Reanimated: 2.0.1
NodeJS: 14.16.0
Xcode: 12.4

Affected platforms

Android (Not checked)
iOS (Checked on it)
Web (Not checked)

The text was updated successfully, but these errors were encountered:

github-actions · 2021-03-29T00:10:17Z

Issue validator

The issue is valid!

piaskowyk · 2021-03-29T06:49:29Z

Hey @Anuj-Raghuvanshi
I have just checked it and everything works properly for me. I tested for iOS on this example project. Could you check if it works for you too?

mrousavy · 2021-03-29T10:27:40Z

package installation is throwing issue so,not any example code here.

this seems to be a completely other issue - what npm version are you on?

mm-webx · 2021-03-29T11:11:57Z

Same issue

after usage useSharedValue

  Extrapolate,
  interpolateColors,
  interpolateNode,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';```

mm-webx · 2021-03-29T11:15:41Z

when I leave only these imports:
import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

mm-webx · 2021-03-29T11:18:09Z

@Anuj-Raghuvanshi for now yarn start --reset-cache helps me.

piaskowyk · 2021-03-29T13:20:47Z

If my example doesn't work for you, most probably this is a cache issue. Try something like this:

rm -rf ./node_modules
yarn
cd ios
pod deintegrate
pod install
yarn start --reset-cache

vitalyrotari · 2021-03-31T15:27:32Z

Today I get this error on RN 0.64 and react-native-reanimated 2.0.1, any suggestions?
Btw I have :hermes_enabled => true in my Podfile

scottmcconnell5 · 2021-03-31T18:20:41Z

I am also facing Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? after using yarn to attempt to recreate this example. I also followed these installation steps: https://docs.swmansion.com/react-native-reanimated/docs/installation/

I tried all the suggested steps above (using ios, haven't tried other platforms)

Package versions:
react-native: "0.63.2",
react-native-reanimated: "^2.0.0",
Xcode: 12.4

I see this issue posted on various forums over the past month. I've tried all of the promising fixes, but no dice.

16francej · 2021-04-06T00:31:22Z

Any updates on this fix? I haven't been able to resolve on my own. Similar to @scottmcconnell5, I have also tried the steps above with no luck.

Seems like this issue has been persistent for a little while, is there anything I can do to help resolution?

LuisRego · 2021-04-06T09:05:09Z

I'm also facing the same issue referred by @scottmcconnell5. Everything is working fine with v2.0.0.

Package versions:

react-native: "0.63.4",
react-native-reanimated: "2.1.0"
Xcode: 12.4

piaskowyk · 2021-04-06T15:32:51Z

I tried to reproduce this issue but It works for me :/ Is it possible to prepare an example repo with this issue so I can easily reproduce it? @16francej or @LuisRego could you help?

surajj2223 · 2021-04-08T09:05:48Z

Same issue with me on

dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.1.0"
  },

Did try resetting yarn cache and removing the modules and reinstalling multiple times, Not working.

piaskowyk · 2021-04-08T09:12:57Z

@surajj2223 Could you show me your babel.config.js file also?

fortezhuo · 2021-04-08T10:35:36Z

@piaskowyk
I have found the issue and create monorepo for this : https://github.com/fortezhuo/reanimated

Web

IOS

surajj2223 · 2021-04-08T11:23:02Z

@surajj2223 Could you show me your babel.config.js file also?

I could solve this by correctly putting in the react-native-reanimated/plugin in the babel.config.js

const path = require('path');
const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        alias: {
          [pak.name]: path.join(__dirname, '..', pak.source),
        },
      },
    ],
    'react-native-reanimated/plugin'
  ]
};

I was putting the reanimated plugin on top of plugins array, putting it at the last as mentioned in the docs resolved the issue for me.

Also, after correctly configuring the babel.config.js I had to do a yarn start --rest-cache which I assume is required as how would a running packager know about a new babel plugin on the fly. So yeah, folks please start your packager once you change the config, I do it generally whenever I have any file/folder changes too.

piaskowyk · 2021-04-08T11:27:08Z

@fortezhuo Thanks a lot, I'll check it as soon as possible.

scottmcconnell5 · 2021-04-08T22:37:29Z

I put the reanimated plugin on bottom of my plugins array and ran yarn start --reset-cache but still am hitting Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

todorone · 2021-04-09T08:15:03Z

I can't provide a reproduction, but we have a pretty big app which we want to migrate from REA1 to REA2. After following installation steps, all good on Android, but on iOS it throws error as soon as trying to use any of REA2 functionality: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Tried both REA 2.0.1 and 2.1, all type of caches were cleared.😼

LuisRego · 2021-04-09T08:31:11Z

I can't provide a reproduction, but we have a pretty big app which we want to migrate from REA1 to REA2. After following installation steps, all good on Android, but on iOS it throws error as soon as trying to use any of REA2 functionality: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

Tried both REA 2.0.1 and 2.1, all type of caches were cleared.😼

Have you tried 2.0.0? In my case everything works fine with 2.0.0. Actually, I had the same error message with 2.0.0, but I wasn't adding as the last item in the array. I'm just bumping from 2.0.0 to 2.1.0.

datvp09 · 2021-04-09T09:31:56Z

I just accidentally put the plugin on the wrong line, take a look at babel.config.js file again

const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        ...
      },
      'react-native-reanimated/plugin' // NOT HERE
    ],
    'react-native-reanimated/plugin' // PUT IT HERE
  ]
};

then restart the bundler using
npm start -- --reset-cache

scottmcconnell5 · 2021-04-11T19:20:14Z

@piaskowyk any updates on a fix for this issue? I'd be happy to help in any way possible

phungdaihiep79 · 2021-04-12T08:57:11Z

I was accidentally put the plugin on the wrong line, take a look at babel.config.js file again

const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        ...
      },
      'react-native-reanimated/plugin' // NOT HERE
    ],
    'react-native-reanimated/plugin' // PUT IT HERE
  ]
};

then restart the bundler using
npm start -- --reset-cache

you save my time bro huhuhuhu

olosegres · 2021-04-15T14:45:33Z

I was getting this error after moving the project directory to another location. If, after react-native init, you do not rename the project and do not move it, there is no such error.

fcandi · 2021-04-15T15:36:44Z

I have the same problem after upgrading to v2 (both 2. and 2.0.1). I will just continue to use v1 until things are sorted out. I am using NPM and was following the instructions mentioned on the website and in this thread exactly.

aanah0 · 2021-04-17T16:34:01Z

I just accidentally put the plugin on the wrong line, take a look at babel.config.js file again

const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        ...
      },
      'react-native-reanimated/plugin' // NOT HERE
    ],
    'react-native-reanimated/plugin' // PUT IT HERE
  ]
};

then restart the bundler using
npm start -- --reset-cache

I'm not believing that I so stupid 😄

Thanks!

bgarcia95 · 2022-05-13T05:32:23Z

If my example doesn't work for you, most probably this is a cache issue. Try something like this:
rm -rf ./node_modules
yarn
cd ios
pod deintegrate
pod install
yarn start --reset-cache

This helped me, working fine now 🚀

thareekanvar · 2022-05-13T06:37:06Z

Solved by adding:

and starting expo with expo start -c

Your an angel 💯

pke · 2022-05-13T07:18:42Z

re-animated is the only native lib that requires all those complicated steps to get it to work between minor version increases/decrease. Can anyone explain why that is? A simple re-install should invalidate the former pod and compiled binary code, shouldn't it?

doverlor · 2022-05-13T10:01:42Z

Solved by adding:

and starting expo with expo start -c

It helped me with my problem, thank you so much!

ngirimana · 2022-05-16T07:38:52Z

Solved by adding:
and starting expo with expo start -c

Your an angel 100

This works for me

francoders · 2022-05-21T07:15:46Z

If "expo start --reset-cache" does not work, use "expo start -c".

ayanmurad987 · 2022-05-24T20:11:02Z

Not Working
"react-native": "0.66.1",
"react-native-reanimated": "2.2.3",

Working Fine
"react-native": "0.67.3",
"react-native-reanimated": "2.2.4",

BoukhalHassane · 2022-05-27T20:12:22Z

Description

Getting Issue in build compilation- Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? when "react-native-reanimated": "^2.0.1" is installed.

Expected behavior

It should keep the build running as it do for previous versions

Actual behavior & steps to reproduce

I've Installed the latest version of plugin & and working in project created with latest React Native and getting issue.

Snack or minimal code example

package installation is throwing issue so,not any example code here.

Package versions

React Native - react-native-reanimated -

React Native: 0.64.0

React Native Reanimated: 2.0.1

NodeJS: 14.16.0

Xcode: 12.4

Affected platforms

Android (Not checked)

iOS (Checked on it)

Web (Not checked)

Solution😉: https://www.lahoregraphix.com/drawer-navigation-errors-in-react-navigation/

sokoya · 2022-06-05T16:55:59Z

If "expo start --reset-cache" does not work, use "expo start -c".

Yes, this works for me :)

Fiyaz6772 · 2022-06-09T07:07:19Z

Solved it by changing babel.config.js like below:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'], //added this line
}

delete node-modules
yarn install
yarn start --reset-cache

Kappyh · 2022-06-10T21:18:20Z

expo start -c

This works for me too, thanks.
Also I add the plugin in the babelconfig file.

mobius1983 · 2022-06-25T04:29:33Z

I had the same problem for more but nothing worked for me, so I installed yarn,
yarn install and yarn start --reset-cache

leoki3331 · 2022-06-25T16:22:45Z

hello i had this problem too using ios
i could resolve this doing this changes

somthing very important that i had to do is use this command :

npm start -- --reset-cache
or the build do not works well

## Description During the installation of `react-native-reanimated` it's incredibly common to encounter a false-positive error that is easily fixed by clearing the cache. This PR adds a note to the docs about cleaning the cache after installing reanimated's babel plugin. Fixes #1875 ## Screenshots / GIFs Sorry for the dark theme 🙈 <img width="823" alt="image" src="https://user-images.githubusercontent.com/39658211/175934379-b33f8630-b269-40f2-b9bb-481bb5fb8eea.png"> ## Test code and steps to reproduce ```sh cd docs/ yarn yarn start ``` and navigate to http://localhost:3000/react-native-reanimated/docs/fundamentals/installation ## Checklist - [x] Updated documentation

jadonhansen · 2022-06-28T21:33:14Z

I had a .babelrc and babel.config.js file in my project root. I combined the two config into one babel.config.js file (because in my case what was in .babelrc is okay to be in babel.config.js too).
End product:

module.exports = {
	presets: ["module:metro-react-native-babel-preset"],
	plugins: [
		[
			"module:react-native-dotenv",
			{
				"safe": true,
				"allowUndefined": false
			}
		],
		"react-native-reanimated/plugin"],
};

Also then ran npm start -- --reset-cache.

This worked for me.

sgsudip · 2022-06-29T18:17:19Z

can anyone tell why exactly placing "react-native-reanimated/plugin" at the end works? what exactly is this error about?

BinGong92 · 2022-07-19T09:30:50Z

@surajj2223 Could you show me your babel.config.js file also?

I could solve this by correctly putting in the react-native-reanimated/plugin in the babel.config.js
const path = require('path');
const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        alias: {
          [pak.name]: path.join(__dirname, '..', pak.source),
        },
      },
    ],
    'react-native-reanimated/plugin'
  ]
};
I was putting the reanimated plugin on top of plugins array, putting it at the last as mentioned in the docs resolved the issue for me.

Also, after correctly configuring the babel.config.js I had to do a yarn start --rest-cache which I assume is required as how would a running packager know about a new babel plugin on the fly. So yeah, folks please start your packager once you change the config, I do it generally whenever I have any file/folder changes too.

I would like to know what your packages look like?

augusto-booment · 2022-09-14T00:23:36Z

I still got this issue using react-native: "0.65"

nabtron · 2023-06-22T13:11:05Z

run using this command: npx react-native start --reset-cache

also make sure your code is similar to: files shown here: https://socalledhacker.com/react-native-drawer-navigation-without-any-errors/

DeVontae316 · 2023-07-08T09:35:29Z

@surajj2223 Could you show me your babel.config.js file also?

I could solve this by correctly putting in the react-native-reanimated/plugin in the babel.config.js
const path = require('path');
const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        alias: {
          [pak.name]: path.join(__dirname, '..', pak.source),
        },
      },
    ],
    'react-native-reanimated/plugin'
  ]
};
I was putting the reanimated plugin on top of plugins array, putting it at the last as mentioned in the docs resolved the issue for me.

Also, after correctly configuring the babel.config.js I had to do a yarn start --rest-cache which I assume is required as how would a running packager know about a new babel plugin on the fly. So yeah, folks please start your packager once you change the config, I do it generally whenever I have any file/folder changes too.

This worked for me plus running expo start -c with npx expo run:ios

eternalclash · 2023-08-22T08:38:16Z

Hi, i just take the issue after i made babel.config.js to module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin']
};
and i did yarn add react-native-reanimated
{
"name": "keyLog",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native-async-storage/async-storage": "^1.19.1",
"@react-native-community/datetimepicker": "^7.4.1",
"@react-native-picker/picker": "^2.4.10",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@shanshang/react-native-pattern-lock": "^1.0.1-rc.1",
"accordion-collapse-react-native": "^1.1.1",
"axios": "^1.4.0",
"date-fns": "^2.30.0",
"lodash": "^4.17.21",
"react": "18.2.0",
"react-native": "0.72.3",
"react-native-debounce-input": "^1.0.5",
"react-native-device-info": "^10.8.0",
"react-native-geolocation-service": "^5.3.1",
"react-native-gesture-handler": "^2.12.1",
"react-native-gesture-password": "^0.4.0",
"react-native-google-places-autocomplete": "^2.5.1",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-maps": "^1.7.1",
"react-native-modal": "^13.0.1",
"react-native-modal-datetime-picker": "^17.0.0",
"react-native-permissions": "^3.8.4",
"react-native-pin-view": "^3.0.3",
"react-native-reanimated": "^3.4.2",
"react-native-responsive-dimensions": "^3.1.1",
"react-native-responsive-screen": "^1.4.2",
"react-native-restart": "^0.0.27",
"react-native-safe-area-context": "^4.7.1",
"react-native-screens": "^3.22.1",
"react-native-svg": "^13.12.0",
"react-native-svg-transformer": "^1.1.0",
"react-native-swiper": "^1.6.0",
"react-native-vector-icons": "^10.0.0",
"react-native-viewport-units": "^0.0.5",
"react-query": "^3.39.3",
"recoil": "^0.7.7",
"styled-components": "^6.0.5"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native/metro-config": "^0.72.9",
"@tsconfig/react-native": "^3.0.0",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.7",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"engines": {
"node": ">=16"
}
}
This is my package.json
Then , i did yarn cache clean, also did yarn android then ./gradlew clean
then i turned on app
but i got a problem
i have a error message
Error: Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin., js engine: hermes
can you resolve it? help me plz

muzammil-majeed-viabletree · 2023-09-26T17:56:50Z

@eternalclash Have you found the solution?

prasanthvenkatachalam · 2024-01-09T07:48:21Z

I just accidentally put the plugin on the wrong line, take a look at babel.config.js file again

const pak = require('../package.json');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'],
        ...
      },
      'react-native-reanimated/plugin' // NOT HERE
    ],
    'react-native-reanimated/plugin' // PUT IT HERE
  ]
};

then restart the bundler using npm start -- --reset-cache

Thanks a lot. It worked for me.

Adityakhare29 · 2024-01-14T00:14:37Z

I also encounter this issue because of version miss match of expo and reanimated modules.

I am able to fix this issue by following command

npx expo install --fix
npm start -- --reset-cache

iambonface · 2024-01-23T05:56:42Z

This worked for me

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

anujraghuvanshi added 🏠 Reanimated 2 Bug labels Mar 29, 2021

piaskowyk self-assigned this Mar 29, 2021

piaskowyk added the To verify label Mar 29, 2021

kimym56 mentioned this issue Jun 7, 2022

0607 Add BottomSheet in ImageScreen; Add QAScreen MapKit kimym56/UXIM_Project#10

Open

kacperkapusciak mentioned this issue Jun 27, 2022

docs: add clean cache note after adding babel plugin #3327

Merged

1 task

piaskowyk closed this as completed in #3327 Jun 28, 2022

ulysseferreira mentioned this issue Jul 28, 2022

COM-2929: expo sdk 44 sophiemoustard/compani-formation#478

Merged

Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? #1875

Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? #1875

Comments

anujraghuvanshi commented Mar 29, 2021 • edited Loading

Description

Expected behavior

Actual behavior & steps to reproduce

Snack or minimal code example

Package versions

Affected platforms

github-actions bot commented Mar 29, 2021

Issue validator

piaskowyk commented Mar 29, 2021 • edited Loading

mrousavy commented Mar 29, 2021

mm-webx commented Mar 29, 2021 • edited Loading

mm-webx commented Mar 29, 2021

mm-webx commented Mar 29, 2021

piaskowyk commented Mar 29, 2021

vitalyrotari commented Mar 31, 2021

scottmcconnell5 commented Mar 31, 2021

16francej commented Apr 6, 2021

LuisRego commented Apr 6, 2021

piaskowyk commented Apr 6, 2021

surajj2223 commented Apr 8, 2021

piaskowyk commented Apr 8, 2021

fortezhuo commented Apr 8, 2021

surajj2223 commented Apr 8, 2021 • edited Loading

piaskowyk commented Apr 8, 2021

scottmcconnell5 commented Apr 8, 2021

todorone commented Apr 9, 2021

LuisRego commented Apr 9, 2021

datvp09 commented Apr 9, 2021 • edited Loading

scottmcconnell5 commented Apr 11, 2021

phungdaihiep79 commented Apr 12, 2021

olosegres commented Apr 15, 2021

fcandi commented Apr 15, 2021

aanah0 commented Apr 17, 2021 • edited Loading

bgarcia95 commented May 13, 2022

thareekanvar commented May 13, 2022

pke commented May 13, 2022

doverlor commented May 13, 2022

ngirimana commented May 16, 2022

francoders commented May 21, 2022

ayanmurad987 commented May 24, 2022

BoukhalHassane commented May 27, 2022 • edited Loading

Description

Expected behavior

Actual behavior & steps to reproduce

Snack or minimal code example

Package versions

Affected platforms

sokoya commented Jun 5, 2022

Fiyaz6772 commented Jun 9, 2022 • edited Loading

Kappyh commented Jun 10, 2022

mobius1983 commented Jun 25, 2022

leoki3331 commented Jun 25, 2022

jadonhansen commented Jun 28, 2022 • edited Loading

sgsudip commented Jun 29, 2022 • edited Loading

BinGong92 commented Jul 19, 2022

augusto-booment commented Sep 14, 2022

nabtron commented Jun 22, 2023

DeVontae316 commented Jul 8, 2023

eternalclash commented Aug 22, 2023

muzammil-majeed-viabletree commented Sep 26, 2023

prasanthvenkatachalam commented Jan 9, 2024

Adityakhare29 commented Jan 14, 2024

iambonface commented Jan 23, 2024 • edited Loading

anujraghuvanshi commented Mar 29, 2021 •

edited

Loading

piaskowyk commented Mar 29, 2021 •

edited

Loading

mm-webx commented Mar 29, 2021 •

edited

Loading

surajj2223 commented Apr 8, 2021 •

edited

Loading

datvp09 commented Apr 9, 2021 •

edited

Loading

aanah0 commented Apr 17, 2021 •

edited

Loading

BoukhalHassane commented May 27, 2022 •

edited

Loading

Fiyaz6772 commented Jun 9, 2022 •

edited

Loading

jadonhansen commented Jun 28, 2022 •

edited

Loading

sgsudip commented Jun 29, 2022 •

edited

Loading

iambonface commented Jan 23, 2024 •

edited

Loading