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

domenicoprestia commented 1 year ago

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

github-actions[bot] commented 1 year ago

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 commented 1 year ago

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

domenicoprestia commented 1 year ago

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 commented 1 year ago

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

thanhdevapp commented 1 year ago

same issue on android

tomekzaw commented 1 year ago

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

t0ma5h commented 1 year ago

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

tomekzaw commented 1 year ago

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

domenicoprestia commented 1 year ago

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

Yes i will try, thanks :)

peterjskaltsis commented 1 year ago

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

tomekzaw commented 1 year ago

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

peterjskaltsis commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

DavideSegullo commented 1 year ago

which version are you using?

jean-marc-cp commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

"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 commented 1 year ago

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 commented 1 year ago

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 commented 10 months ago

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 commented 10 months ago

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

0xdevanshu commented 8 months ago

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

Dror-Bar commented 7 months ago

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

Same problem here with 3.7.0, RN 0.73 on IOS. Quite surprising nothing seems to fix it.

tomekzaw commented 7 months ago

@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 commented 6 months ago

I was facing the same issue

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

muhammadqazi commented 6 months ago

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 commented 6 months ago

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 commented 4 months ago

I was facing the same issue

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

Yes, this worked for me!!! Thanks.

deskofnia commented 5 days ago

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.

software-mansion / react-native-reanimated