V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? #4506

domenicoprestia · 2023-05-30T15:11:59Z

Description

Error: Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js?

This error appeared randomly when i was rebuilding my application on an update branch (didn't do any particular change to packages when the error popped up, and i already had rebuilt many times the app on this branch), in production everything works fine an correctly, but when i try to launch the app on the simulator this error pops up, both on android and ios, this is a preview of my babel.config.js:

module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ ['module:react-native-dotenv', { 'envName': 'APP_ENV', 'moduleName': 'react-native-dotenv', 'path': '.env' }], 'react-native-reanimated/plugin' ] };

is there something i'm missing? i didn't actually change anything and even clearing the whole env many times and restarting the pc didn't actually solve anything (i've also tried to go with npm start -- --reset-cache but nothing)

I've found other issues on the repo, also from reanimated v2 but every solution was leading to the babel.config.js, and to me mine looks correct.

Steps to reproduce

npm start --reset-cache

Snack or a link to a repository

The repo is private

Reanimated version

3.2.0

React Native version

0.71.8

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

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

github-actions · 2023-05-30T15:12:21Z

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

DavideSegullo · 2023-05-30T15:13:35Z

It seems we have the same issue #4507 , I added some details

domenicoprestia · 2023-05-30T15:17:59Z

It seems we have the same issue #4507 , I added some details

Actually in my case the error didn't pop up on the update but on a clean boot of the application (deleting node_modules, package-lock.json, Pods and Podfile.lock)

DavideSegullo · 2023-05-30T15:26:37Z

Ye, but I think it's related to the same issue, I'll try to find out why

tomekzaw · 2023-05-31T12:21:56Z

Hey @domenicoprestia, thanks for reporting this issue. Can you please check if #4511 fixes your problem?

t0ma5h · 2023-05-31T13:47:04Z

@tomekzaw i have the same issues, but the fixes in your PR work.

tomekzaw · 2023-05-31T14:07:08Z

Can anyone confirm if it also works on web (with react-native-web)?

domenicoprestia · 2023-06-01T18:19:02Z

Hey @domenicoprestia, thanks for reporting this issue. Can you please check if #4511 fixes your problem?

Yes i will try, thanks :)

peterjskaltsis · 2023-06-07T02:13:04Z

Thank you for the PR @tomekzaw, do we have any ETA for the next release with this fix? 🙏

tomekzaw · 2023-06-07T06:13:22Z

@peterjskaltsis You can use yarn install react-native-reanimated@nightly or wait for 3.3.0 (probably early next week).

peterjskaltsis · 2023-06-07T06:52:43Z

@peterjskaltsis You can use yarn install react-native-reanimated@nightly or wait for 3.3.0 (probably early next week).

Perfect, thank you!

jean-marc-cp · 2023-06-08T12:56:25Z

I tried out the nightly build but got the follow errors.

Error: Requiring module "node_modules/react-native-reanimated/src/index.ts", which threw an exception: Error: Trying to convert a cyclic object to a shareable. This is not supported., js engine: hermes

Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.

alejandro-geeksquare · 2023-08-18T14:50:54Z

Any solution? This problem is still present when I try to run
const Drawer = createDrawerNavigator()
from "@react-navigation/drawer"@jean-marc-cp o @domenicoprestia

jean-marc-cp · 2023-08-22T08:20:23Z

@alejandro-geeksquare Not been able to resolve this yet.

DavideSegullo · 2023-08-22T08:29:49Z

which version are you using?

jean-marc-cp · 2023-08-22T09:13:49Z

Tried again last week after we updated to RN 0.71.12 with reanimated 3.4.2. At first there was an error at launch due to babel version being undefined on line 148 in node_modules/react-native-reanimated/src/reanimated2/shareables.ts. After hard coding it I then got the error from my previous post above on app launch.

I was on Android didn't get round to trying on iOS.

DavideSegullo · 2023-08-22T20:14:27Z

Tried again last week after we updated to RN 0.71.12 with reanimated 3.4.2. At first there was an error at launch due to babel version being undefined on line 148 in node_modules/react-native-reanimated/src/reanimated2/shareables.ts. After hard coding it I then got the error from my previous post above on app launch.

I was on Android didn't get round to trying on iOS.

It seems strange, can you provide a minimal reproduction repo? Maybe it isn't related to this issue, what is your babel config?

valn1 · 2023-08-30T16:41:08Z

i am also having this problem.
here is my babel.config

module.exports = {
    presets: ["module:metro-react-native-babel-preset"],
    plugins: ["babel-plugin-styled-components", "react-native-reanimated/plugin"],
    env: {
        test: {
            plugins: ["@babel/plugin-transform-modules-commonjs"],
        },
    },
};

AliYar-Khan · 2023-09-02T20:00:17Z

Not working for me as well
package.json dependencies :

  "dependencies": {
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "expo": "~49.0.7",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-reanimated": "3.3.0"
  },

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

Tanererkan06 · 2023-09-12T13:18:14Z

"react-native-reanimated": "^3.4.2", its working

"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.22.15",
"@react-native/eslint-config": "^0.72.2",
"@react-native/metro-config": "^0.72.11",
"@rnx-kit/align-deps": "^2.2.4",
"@tsconfig/react-native": "^3.0.0",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.76.8",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},

Tanererkan06 · 2023-09-12T13:18:53Z

Not working for me as well package.json dependencies :

"dependencies": { "@react-navigation/drawer": "^6.6.3", "@react-navigation/native": "^6.1.7", "expo": "~49.0.7", "expo-status-bar": "~1.6.0", "react": "18.2.0", "react-native": "0.72.3", "react-native-reanimated": "3.3.0" },

Babel.config.js

module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], plugins: ["react-native-reanimated/plugin"], }; };

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

valn1 · 2023-09-12T14:26:00Z

to be honest, i don't really know what i did to fix it, but try cleaniung everything and running with
npm start -- --reset-cache

gilhrpenner · 2023-11-12T17:33:49Z

Also having the same issue

"dependencies": {
    "@expo-google-fonts/roboto": "^0.2.3",
    "@hookform/resolvers": "^3.3.2",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@supabase/supabase-js": "^2.38.4",
    "dayjs": "^1.11.10",
    "expo": "~49.0.15",
    "expo-font": "~11.4.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "jotai": "^2.5.1",
    "lucide-react-native": "^0.292.0",
    "react": "18.2.0",
    "react-hook-form": "^7.48.2",
    "react-native": "0.72.6",
    "react-native-elements": "^3.4.3",
    "react-native-paper": "^5.11.1",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-vector-icons": "^10.0.1",
    "styled-components": "^6.1.1",
    "zod": "^3.22.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0"
  },

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    env: {
      production: {
        plugins: ["react-native-paper/babel", "react-native-reanimated/plugin"],
      },
    },
  };
};

tomekzaw · 2023-11-12T18:47:34Z

@gilhrpenner Reanimated docs clearly state that you need to add react-native-reanimated/plugin in top-level plugins, not inside env.production.plugins.

0xdevanshu · 2024-01-21T16:12:00Z

Issue persists for
RN: 0.73
RNA: 3.6.1

bable config:

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

checked the compatibility here https://docs.swmansion.com/react-native-reanimated/docs/guides/compatibility/

edit:

tried everything cleaning cache, reinstalling node modules, gradle clean build with every combination and nothing worked

tomekzaw · 2024-02-18T13:04:15Z

@0xdevanshu There's a problem in your babel.config.js, please move the square bracket, reset Metro cache and try again:

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

NoobMahbub · 2024-03-09T11:13:52Z

I was facing the same issue

running npx expo start -c in my terminal solved this issue

muhammadqazi · 2024-03-10T22:16:37Z

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

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resetCache: true,
};

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

adding resetCache: true, in metro.config.js solved my problem

jean-marc-cp · 2024-03-18T15:24:40Z

I tried out the nightly build but got the follow errors.

Error: Requiring module "node_modules/react-native-reanimated/src/index.ts", which threw an exception: Error: Trying to convert a cyclic object to a shareable. This is not supported., js engine: hermes

Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.

We managed to resolve this issue finally turned out to be an outdated metro.config file the following needed removing.

    getTransformOptions: async () => {
      return {
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      };
    },

elisabeth0bangoura · 2024-05-23T00:11:58Z

I was facing the same issue

running npx expo start -c in my terminal solved this issue

Yes, this worked for me!!! Thanks.

domenicoprestia added the Needs review Issue is ready to be reviewed by a maintainer label May 30, 2023

github-actions bot added Missing info The user didn't precise the problem enough Platform: Android This issue is specific to Android Platform: iOS This issue is specific to iOS Missing repro This issue need minimum repro scenario labels May 30, 2023

github-actions bot removed the Missing info The user didn't precise the problem enough label May 30, 2023

domenicoprestia changed the title ~~V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js?~~ [3.2.0] Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? May 30, 2023

domenicoprestia changed the title ~~[3.2.0] Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js?~~ Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? May 30, 2023

domenicoprestia changed the title ~~Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js?~~ V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? May 30, 2023

This comment was marked as spam.

Sign in to view

tomekzaw mentioned this issue May 31, 2023

Inject _WORKLET to RN runtime #4511

Merged

tomekzaw mentioned this issue Jun 1, 2023

Failed to create worklet Error. #4515

Closed

tomekzaw closed this as completed in a27e45f Jun 6, 2023

e-younan mentioned this issue Jun 8, 2023

feat: introduce Shopify's FlashList component codeherence/react-native-header#13

Merged

6 tasks

This comment was marked as duplicate.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? #4506

V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? #4506

domenicoprestia commented May 30, 2023 •

edited

github-actions bot commented May 30, 2023

DavideSegullo commented May 30, 2023

domenicoprestia commented May 30, 2023

DavideSegullo commented May 30, 2023

This comment was marked as spam.

tomekzaw commented May 31, 2023

t0ma5h commented May 31, 2023

tomekzaw commented May 31, 2023

domenicoprestia commented Jun 1, 2023

peterjskaltsis commented Jun 7, 2023

tomekzaw commented Jun 7, 2023

peterjskaltsis commented Jun 7, 2023

jean-marc-cp commented Jun 8, 2023

alejandro-geeksquare commented Aug 18, 2023 •

edited

jean-marc-cp commented Aug 22, 2023 •

edited

DavideSegullo commented Aug 22, 2023

jean-marc-cp commented Aug 22, 2023

DavideSegullo commented Aug 22, 2023

valn1 commented Aug 30, 2023

AliYar-Khan commented Sep 2, 2023 •

edited by tomekzaw

Tanererkan06 commented Sep 12, 2023

Tanererkan06 commented Sep 12, 2023

valn1 commented Sep 12, 2023

gilhrpenner commented Nov 12, 2023

tomekzaw commented Nov 12, 2023

0xdevanshu commented Jan 21, 2024 •

edited

This comment was marked as duplicate.

tomekzaw commented Feb 18, 2024 •

edited

NoobMahbub commented Mar 9, 2024

muhammadqazi commented Mar 10, 2024

jean-marc-cp commented Mar 18, 2024

elisabeth0bangoura commented May 23, 2024

V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? #4506

V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? #4506

Comments

domenicoprestia commented May 30, 2023 • edited

Description

Steps to reproduce

Snack or a link to a repository

Reanimated version

React Native version

Platforms

JavaScript runtime

Workflow

Architecture

Build type

Device

Device model

Acknowledgements

github-actions bot commented May 30, 2023

DavideSegullo commented May 30, 2023

domenicoprestia commented May 30, 2023

DavideSegullo commented May 30, 2023

This comment was marked as spam.

tomekzaw commented May 31, 2023

t0ma5h commented May 31, 2023

tomekzaw commented May 31, 2023

domenicoprestia commented Jun 1, 2023

peterjskaltsis commented Jun 7, 2023

tomekzaw commented Jun 7, 2023

peterjskaltsis commented Jun 7, 2023

jean-marc-cp commented Jun 8, 2023

alejandro-geeksquare commented Aug 18, 2023 • edited

jean-marc-cp commented Aug 22, 2023 • edited

DavideSegullo commented Aug 22, 2023

jean-marc-cp commented Aug 22, 2023

DavideSegullo commented Aug 22, 2023

valn1 commented Aug 30, 2023

AliYar-Khan commented Sep 2, 2023 • edited by tomekzaw

Tanererkan06 commented Sep 12, 2023

Tanererkan06 commented Sep 12, 2023

valn1 commented Sep 12, 2023

gilhrpenner commented Nov 12, 2023

tomekzaw commented Nov 12, 2023

0xdevanshu commented Jan 21, 2024 • edited

This comment was marked as duplicate.

tomekzaw commented Feb 18, 2024 • edited

NoobMahbub commented Mar 9, 2024

muhammadqazi commented Mar 10, 2024

jean-marc-cp commented Mar 18, 2024

elisabeth0bangoura commented May 23, 2024

domenicoprestia commented May 30, 2023 •

edited

alejandro-geeksquare commented Aug 18, 2023 •

edited

jean-marc-cp commented Aug 22, 2023 •

edited

AliYar-Khan commented Sep 2, 2023 •

edited by tomekzaw

0xdevanshu commented Jan 21, 2024 •

edited

tomekzaw commented Feb 18, 2024 •

edited