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

[anujraghuvanshi]

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)
• [x] iOS (Checked on it)
• [ ] Web (Not checked)

[github-actions[bot]]

Issue validator

The issue is valid!

[piaskowyk]

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]

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]

Same issue

after usage useSharedValue

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

[mm-webx]

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

[mm-webx]

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

[piaskowyk]

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]

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]

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]

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]

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]

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]

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]

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

[fortezhuo]

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

Web

IOS

[surajj2223]

@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]

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

[scottmcconnell5]

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]

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]

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]

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]

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

[phungdaihiep79]

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]

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]

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]

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!

[scottmcconnell5]

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.

I tried creating a fresh boiler plate (https://github.com/victorkvarghese/react-native-feature-boilerplate) and skipping the rename step, but still facing the same issue :(

[natew]

I get this if I have the remote debugger open, which reanimated is not compatible with.

[AlphaJuliettOmega]

I have the same problem after upgrading to v2 (both 2. and 2.0.1).

2.1.0 here on RN 0.64 + React 17 and the issue persists

Weird part, those weird Babel steps + Native Java code changes aren't needed for:

import Animated, { EasingNode } from 'react-native-reanimated';

but if you:

import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming
} from 'react-native-reanimated';

the app hard crashes with 'Reanimated 2 failed to create a worklet'

[18601673727]

My problem with worklet is bit different but someone please help as well? https://github.com/software-mansion/react-native-reanimated/discussions/2004

[multiplegeorges]

This error goes away when I close the remote debugger. Debugging can be enabled in the app in iOS without a debugger connected and the error no longer occurs.

[jcedborger]

This error goes away when I close the remote debugger. Debugging can be enabled in the app in iOS without a debugger connected and the error no longer occurs.

Same here. The only way I can get rid of it. I need the debugger though 😞

[Dajust]

It was a simple case of yarn start --reset-cache for me.

[madsleejensen]

same problem on 2.2.0 if i disable remote debugger it works fine.

[egemenuzunali]

Unusable for me as well, get the same error both on 2.0.0 and 2.2.0. Tried all solutions mentioned above without success

[madsleejensen]

The error occurs because when activating remote debug the useOnlyV1 flag becomes true (https://github.com/software-mansion/react-native-reanimated/blob/5d2cf0f7b6053a1b94b1d27570dee649f7d022a8/src/reanimated2/NativeReanimated.native.ts#L9)

I just confirmed that you can replicate it on the playground example:

• clone / react-native run-ios https://github.com/software-mansion-labs/reanimated-2-playground
• open dev menu and enable "debug"
• open dev menu and "reload"
• error appears.

[dawidchyrzynski]

Make sure you have remote debugging disabled.

[AlphaJuliettOmega]

Make sure you have remote debugging disabled.

Is this a hard line?

1. As in, will this library simply not support 'remote debugging'?

If it breaks debugging support, it means I will not use it.

2. Is that the only issue with this 'worklet' bug?

[madsleejensen]

If it breaks debugging support, it means I will not use it.

Flipper debugging works fine! Its only the "Debug with Chrome"

[dawidchyrzynski]

From the documentation:

[AlphaJuliettOmega]

@dawidchyrzynski seemed like a temporary notification due to alpha V2 things. So it that a permanent decision, I'm trying to understand.

Flipper debugging works fine! Its only the "Debug with Chrome"

https://github.com/facebook/react/tree/master/packages/react-devtools

React Native Debugger seems to integrate the same way as 'debug with chrome'

What's the difference between Flipper and how the official tool does debugging? (I want to understand why Reanimated only supports flipper or how it even matters)

edit 1: I stumbled across this thread: https://github.com/react-native-community/discussions-and-proposals/issues/206

I'm sold, I also want to move towards not remote debugging The yellow warning just doesn't make sense, especially when upgrading from Reanimated 1 - any kind of debugging being on or off should not cause complete failure of the library.

Thanks for your patience

edit 2 Tried flipper, on Windows 10 it's fantastic on a MacBook Pro it's garbage, sends it into complete overdrive like a full Blender Render or Release Bundling does, for the entire time Flipper is open.

Don't like it.

[sunzhongliangde]

I didn't enable debug mode,but i had the same problem, when I use this way to load RCTBridge

// didFinishLaunchingWithOptions
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:[Method returnBundle]
                                                        moduleName:@"your moduleName"
                                                 initialProperties:nil
                                                     launchOptions:launchOptions];

I just change the RCTBridge loading mode to this

// didFinishLaunchingWithOptions
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                     moduleName:'your moduleName'
                                              initialProperties:nil];

// delegate method
+ (NSURL*)jsCodeLocation {
    NSURL *jsCodeLocation;
#ifdef DEBUG
      jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
      jsCodeLocation = [CodePush bundleURL];
#endif
    return jsCodeLocation;
}

it works for me

[SusulAdam]

For me the solution it was that I had "show perf monitor" turned on. When I disabled it and restarted the application with "--reset-cache" I stopped getting this error

[ilibaz]

so I've tried all the suggestions from here and nothing has worked. this combination has worked for me:

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' // KEEP IT HERE
  ]
};

and then

expo start -c

[Phong940253]

I'm clean cache by

yarn cache clean

after run

expo r -c

it's work for me

[hadnet]

I'm using the bare Expo workflow and just did this in order to work:

Place 'react-native-reanimated/plugin' at the end of plugins in babel.config.js

  ...
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ]

then enable Hermes in android/app/build.gradle

  project.ext.react = [
    enableHermes: true
  ]

Finally

 yarn start --reset-cache

[ganeshsacharya]

This worked for me: https://stackoverflow.com/questions/67130651/reanimated-2-failed-to-create-a-worklet-maybe-you-forgot-to-add-reanimateds-ba

I am on npm so i did npx react-native start --reset-cache which opens the terminal window, that i killed. went back and simply did npm run android then using local/tunnel connection to my Android device expo go. worked well for me.

[ganeshsacharya]

I'm using the bare Expo workflow and just did this in order to work:

Place 'react-native-reanimated/plugin' at the end of plugins in babel.config.js

  ...
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ]

then enable Hermes in android/app/build.gradle

  project.ext.react = [
    enableHermes: true
  ]

Finally

 yarn start --reset-cache

thanks. I am curious however, in the bear expo workflow where can you locate the build.gradle file?

[AlphaJuliettOmega]

@hadnet would you mind checking / testing which imports you're using?

https://github.com/software-mansion/react-native-reanimated/issues/1875#issuecomment-832715915

Some imports cause this bug/issue to be side-stepped, if you're not using imports that cause the symptom, your fix didn't fix it

[babyrusa]

I did everything here but it still doesn't work. I have restarted my emulator and clear cache multiple times as well :( I wonder why

  ...
  plugins: [
    ...
    'react-native-reanimated/plugin',
  ]
then enable Hermes in android/app/build.gradle

  project.ext.react = [
    enableHermes: true
  ]
Finally

 npm start --reset-cache