Error: [BABEL] Cannot find module 'react-native-worklets/plugin'

[unkn0wndfbx]

iOS Bundling failed 479ms node_modules\expo-router\entry.js (1 module)
ERROR node_modules\expo-router\entry.js: [BABEL] D:\Documents\my-app\node_modules\expo-router\entry.js: Cannot find module 'react-native-worklets/plugin'

This error occurs repeatedly after installing the packages (reanimated, gesture handler, nativewind). I am using Expo SDK ^53.0.0 in development build mode.

I followed the official Nativewind documentation (which also installs Reanimated):
https://www.nativewind.dev/docs/getting-started/installation

Here is my babel.config.js:

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

Here is my metro.config.js:

const { withNativeWind } = require('nativewind/metro');
const { getSentryExpoConfig } = require('@sentry/react-native/metro');
const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');

const config = getSentryExpoConfig(__dirname);

config.resolver = {
  ...config.resolver,
  sourceExts: [...config.resolver.sourceExts, 'svg'],
  assetExts: config.resolver.assetExts.filter(ext => ext !== 'svg'),
  resetCache: true,
};

module.exports = withNativeWind(wrapWithReanimatedMetroConfig(config), { input: './global.css' });

Here is my package.json:

{
  "name": "my-app",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "start:clear": "expo start -c --dev-client",
    "build:android:dev": "eas build --platform android --profile development",
    "build:android:prod": "eas build --platform android --profile production",
    "build:ios:dev": "eas build --platform ios --profile development",
    "build:ios:prod": "eas build --platform ios --profile production --auto-submit",
    "test": "jest --watchAll",
    "lint": "eslint . -f pretty",
    "lint:quiet": "eslint . -f pretty --quiet",
    "lint:fix": "eslint . --fix -f pretty",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "format:fix": "prettier --write . && eslint . --fix",
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@eslint/compat": "^1.3.1",
    "@eslint/eslintrc": "^3.3.1",
    "@expo/vector-icons": "^14.0.2",
    "@invertase/react-native-apple-authentication": "^2.4.1",
    "@react-native-async-storage/async-storage": "2.1.2",
    "@react-native-community/datetimepicker": "8.4.1",
    "@react-native-community/hooks": "^100.1.0",
    "@react-native-community/netinfo": "11.4.1",
    "@react-native-firebase/app": "^22.0.0",
    "@react-native-firebase/auth": "^22.2.1",
    "@react-native-firebase/firestore": "^22.1.0",
    "@react-native-firebase/functions": "^22.0.0",
    "@react-native-google-signin/google-signin": "^13.2.0",
    "@react-native-masked-view/masked-view": "^0.3.2",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@sentry/react-native": "~6.14.0",
    "@typescript-eslint/eslint-plugin": "^8.35.0",
    "@typescript-eslint/parser": "^8.35.0",
    "date-fns": "^4.1.0",
    "date-fns-tz": "^3.2.0",
    "eslint-plugin-react-compiler": "^19.1.0-rc.2",
    "expo": "^53.0.0",
    "expo-alternate-app-icons": "^1.5.0",
    "expo-background-timer": "^0.2.0",
    "expo-blur": "~14.1.5",
    "expo-build-properties": "~0.14.8",
    "expo-constants": "~17.1.7",
    "expo-dev-client": "~5.2.4",
    "expo-device": "~7.1.4",
    "expo-font": "~13.3.2",
    "expo-haptics": "~14.1.4",
    "expo-image": "~2.4.0",
    "expo-keep-awake": "~14.1.4",
    "expo-linear-gradient": "~14.1.5",
    "expo-linking": "~7.1.7",
    "expo-localization": "~16.1.6",
    "expo-notifications": "~0.31.4",
    "expo-router": "~5.1.6",
    "expo-sharing": "~13.1.5",
    "expo-splash-screen": "~0.30.10",
    "expo-status-bar": "~2.2.3",
    "expo-symbols": "~0.4.5",
    "expo-system-ui": "~5.0.11",
    "expo-web-browser": "~14.2.0",
    "firebase": "^11.6.0",
    "i18next": "^25.4.0",
    "intl-pluralrules": "^2.0.1",
    "lightningcss": "^1.30.1",
    "lottie-react-native": "7.2.2",
    "nativewind": "^4.2.0",
    "nodemailer": "^6.10.1",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-i18next": "^15.7.1",
    "react-native": "0.79.5",
    "react-native-css-interop": "^0.1.22",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-global-props": "^1.1.5",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-pager-view": "6.7.1",
    "react-native-purchases": "^8.11.4",
    "react-native-purchases-ui": "^8.11.4",
    "react-native-reanimated": "~3.17.4",
    "react-native-reanimated-dnd": "^1.1.0",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-svg": "15.11.2",
    "react-native-view-shot": "~4.0.3",
    "react-native-web": "^0.20.0",
    "react-native-webview": "13.13.5",
    "vaul": "^1.0.0",
    "zod": "^3.25.16"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@eslint/js": "^9.29.0",
    "@types/jest": "^29.5.12",
    "@types/nodemailer": "^6.4.17",
    "@types/react": "~19.0.10",
    "@types/react-i18next": "^8.1.0",
    "@types/react-native-global-props": "^1.1.6",
    "@types/react-test-renderer": "^18.3.0",
    "autoprefixer": "^10.4.21",
    "concurrently": "^9.1.2",
    "eslint": "^8.57.0",
    "eslint-config-expo": "~9.2.0",
    "eslint-config-prettier": "^10.1.5",
    "eslint-formatter-pretty": "^6.0.1",
    "eslint-plugin-filenames": "^1.3.2",
    "eslint-plugin-prettier": "^5.5.1",
    "eslint-plugin-react": "^7.37.5",
    "globals": "^16.2.0",
    "jest": "^29.2.1",
    "jest-expo": "~53.0.10",
    "prettier": "^3.6.2",
    "prettier-plugin-tailwindcss": "^0.5.11",
    "react-native-svg-transformer": "^1.5.0",
    "react-test-renderer": "18.3.1",
    "tailwindcss": "^3.4.17",
    "ts-node": "^10.9.2",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.35.0"
  },
  "private": true
}

[MatiPl01]

Hey @unkn0wndfbx! Are you sure that you use compatible version of nativewind? It seems that your version of nativewind specifies react-native-worklets/plugin in its babel config but react-native-worklets/plugin is available only after installing react-native-worklets, which work with react-native-reanimate v4. Since you are using reanimated v3, you don't have to install react-native-worklets so it seems that this error is caused by your version of nativewind that is no longer compatible with reanimated v3 or your configuration is wrong.

[MatiPl01]

They should be compatible. I don't know what is the issue here. Can you copy the configuration from your original project to the reproduction repository that you shared? I'd like to be able to reproduce the original issue if possible as it is hard to guess what is causing this problem without the ability to reproduce it.

[unkn0wndfbx]

Yes, I can do that. Is it a problem if there are native dependencies that need to be built, because there are some in my application in development build?

[MatiPl01]

I think that this is not a problem but I will see.

[unkn0wndfbx]

Okay, I've pushed the changes with the new dependencies. As for the original project, I'm rebuilding it to make sure there are no dependency errors and in case it makes Nativewind work with Reanimated.

[unkn0wndfbx]

Someone told me this when talking about compatibility issues: "The problem is that Nativewind is still on version 4, and it doesn't work as well with Expo 54. For example, react-native-reanimated is on version 4, whereas with Nativewind, it should be 3.17.4. I recommend waiting until Nativewind releases version 5, then updating your project, because you might get library incompatibility errors. Today, I updated my project to Expo 54 and my styles were completely messed up. And this: “Well, the best option is to stay on Expo 53 until Nativewind V5 arrives.”