react-native-reanimated: V3 Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js?

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 i have the same issues, but the fixes in your PR work.

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

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"],
  };
};

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

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

I was facing the same issue

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

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)

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

@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',
   ],
 };

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

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"],
        },
    },
};

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?

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