Failed to create worklet Error.

[madgreasemonkey]

Description

I am trying to run my project when I get this error.

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

I am attaching the screenshot for reference.

I have already added the relevant code to babe.config.js as below

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

My package.json file is as follows.

"dependencies": { "@dudigital/react-native-zoomable-view": "^1.1.3", "@freakycoder/react-native-bounceable": "^0.2.5", "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "^5.0.1", "@react-native-community/masked-view": "^0.1.10", "@react-native-community/netinfo": "^6.0.0", "@react-native-community/push-notification-ios": "^1.8.0", "@react-native-community/voice": "^1.1.9", "@react-native-firebase/app": "^11.3.2", "@react-native-firebase/messaging": "^11.3.2", "@react-native/normalize-color": "^2.1.0", "@react-navigation/bottom-tabs": "^5.5.0", "@react-navigation/compat": "^5.3.13", "@react-navigation/drawer": "^5.12.3", "@react-navigation/material-top-tabs": "^5.3.14", "@react-navigation/native": "^5.9.2", "@react-navigation/stack": "^5.14.2", "@reduxjs/toolkit": "^1.3.6", "@types/react-native-snap-carousel": "^3.8.5", "axios": "^0.21.1", "d3-shape": "^3.2.0", "dayjs": "^1.10.4", "events": "^3.3.0", "moment": "^2.29.4", "radio-buttons-react-native": "^1.0.4", "react": "18.1.0", "react-hook-form": "^5.7.2", "react-native": "0.72.0-rc.0", "react-native-background-downloader": "^2.3.4", "react-native-base64": "^0.2.1", "react-native-bootsplash": "^2.2.7", "react-native-charts-wrapper": "^0.5.11", "react-native-date-picker": "^3.2.10", "react-native-device-info": "^8.0.1", "react-native-drag-drop-grid-library": "^1.0.7", "react-native-dynamic-search-bar": "^2.0.2", "react-native-fast-image": "^8.6.3", "react-native-fs": "^2.20.0", "react-native-geolocation-service": "^5.3.0", "react-native-gesture-handler": "^1.6.1", "react-native-inappbrowser-reborn": "^3.6.3", "react-native-linear-gradient": "^2.6.2", "react-native-material-dropdown": "^0.11.1", "react-native-modal": "^11.6.1", "react-native-modal-dropdown": "github:siemiatj/react-native-modal-dropdown", "react-native-orientation-locker": "^1.5.0", "react-native-paper": "^4.5.0", "react-native-permissions": "^3.5.0", "react-native-push-notification": "^7.2.3", "react-native-qrcode-svg": "^6.1.2", "react-native-ratings": "^7.4.0", "react-native-reanimated": "^3.2.0", "react-native-render-html": "^6.0.0-beta.2", "react-native-responsive-screen": "^1.4.2", "react-native-safe-area-context": "^2.0.2", "react-native-screens": "^3.18.0", "react-native-share": "^7.0.0", "react-native-slider": "^0.11.0", "react-native-snap-carousel": "^3.9.1", "react-native-speedometer-chart": "^0.7.5", "react-native-spinkit": "^1.5.1", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^13.6.0", "react-native-tab-view": "^2.15.2", "react-native-toast-message": "^2.1.6", "react-native-user-avatar": "^1.0.8", "react-native-vector-icons": "^7.1.0", "react-native-video": "^5.2.0", "react-native-view-pdf": "^0.11.0", "react-native-webview": "^11.23.1", "react-native-youtube-iframe": "^2.2.2", "react-redux": "^7.2.0", "redux-persist": "^6.0.0", "rn-fetch-blob": "^0.12.0" }, "devDependencies": { "@babel/core": "^7.8.4", "@babel/runtime": "^7.8.4", "@react-native-community/eslint-config": "^1.1.0", "@types/jest": "^26.0.19", "@types/react": "^16.14.0", "@types/react-native": "0.63.3", "@types/react-redux": "^7.1.12", "@types/react-test-renderer": "^17.0.0", "babel-jest": "^25.1.0", "eslint": "^7.32.0", "jest": "^25.1.0", "metro-react-native-babel-preset": "^0.67.0", "react-test-renderer": "17.0.2", "typescript": "^4.1.3" }, "jest": { "preset": "react-native" }

I have already cleaned the code, deleted node modules folder, restarted metro server to no avail. Below are the commands for the same

watchman watch-del-all rm -rf $TMPDIR/react-native-packager-cache-* rm -rf $TMPDIR/metro-bundler-cache-* rm -rf node_modules/ npm cache clean --force npm install --legacy-peer-deps npm start --reset-cache

Steps to reproduce

watchman watch-del-all
rm -rf $TMPDIR/react-native-packager-cache-*
rm -rf $TMPDIR/metro-bundler-cache-*
rm -rf node_modules/
npm cache clean --force
npm install --legacy-peer-deps
npm start --reset-cache

Snack or a link to a repository

na

Reanimated version

3.2.0

React Native version

0.72.0-rc.0

Platforms

Android, iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14 Pro

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[github-actions]

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?

[tomekzaw]

Duplicate of #4506.