react-native expo metro-bundler nativewind

Error to build React Native + Expo + Nativewind app. Error: Cannot find module 'nativewind/metro'

I have followed the official installation guide of NativeWind. But I am getting Error: Cannot find module 'nativewind/metro' persistently. I am using Expo SDK 52.

My package.json:

{
  "name": "mobile",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "^2.1.0",
    "@react-native-community/cli": "latest",
    "@react-navigation/bottom-tabs": "^7.2.0",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/native-stack": "^7.2.0",
    "@react-navigation/stack": "^7.1.1",
    "axios": "^1.8.4",
    "expo": "~52.0.11",
    "expo-blur": "~14.0.1",
    "expo-constants": "~17.0.3",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linking": "~7.0.3",
    "expo-router": "^4.0.15",
    "expo-splash-screen": "~0.29.13",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.4",
    "expo-web-browser": "~14.0.1",
    "nativewind": "^2.0.11",
    "react": "18.3.1",
    "react-dom": "^18.3.1",
    "react-native": "0.76.3",
    "react-native-gesture-handler": "^2.21.2",
    "react-native-get-random-values": "^1.11.0",
    "react-native-reanimated": "3.16.2",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "^4.4.0",
    "react-native-vector-icons": "^10.2.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.2",
    "tailwindcss": "3.4.17"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@tsconfig/react-native": "^3.0.5",
    "@types/jest": "^29.5.14",
    "@types/react": "^18.3.20",
    "@types/react-test-renderer": "^19.0.0",
    "jest": "^29.2.1",
    "jest-expo": "~52.0.2",
    "metro": "^0.82.1",
    "react-test-renderer": "18.3.1",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.8.2"
  },
  "private": true
}

Error:

Starting project at D:\VSCode WorkSpace\Project\mobile
Error: Cannot find module 'nativewind/metro'
Require stack:
- D:\VSCode WorkSpace\Project\mobile\metro.config.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\import-fresh\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\cosmiconfig\dist\loaders.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\cosmiconfig\dist\createExplorer.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\cosmiconfig\dist\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\metro-config\src\loadConfig.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\metro-config\src\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\server\metro\instantiateMetro.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\server\metro\MetroBundlerDevServer.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\server\DevServerManager.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\startAsync.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\bin\cli
- D:\VSCode WorkSpace\Project\mobile\node_modules\expo\bin\cli
Error: Cannot find module 'nativewind/metro'
Require stack:
- D:\VSCode WorkSpace\Project\mobile\metro.config.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\import-fresh\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\cosmiconfig\dist\loaders.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\cosmiconfig\dist\createExplorer.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\cosmiconfig\dist\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\metro-config\src\loadConfig.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\metro-config\src\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\server\metro\instantiateMetro.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\server\metro\MetroBundlerDevServer.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\server\DevServerManager.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\startAsync.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\src\start\index.js
- D:\VSCode WorkSpace\Project\mobile\node_modules\@expo\cli\build\bin\cli
- D:\VSCode WorkSpace\Project\mobile\node_modules\expo\bin\cli
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1145:15)
    at Function.Module._load (node:internal/modules/cjs/loader:986:27)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (D:\VSCode WorkSpace\Project\mobile\metro.config.js:2:28)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1024:12)
    at Module.require (node:internal/modules/cjs/loader:1233:19)

Also getting an error from Tailwind IntelliSense:

[Error - 5:44:00 PM] Unable to load config file at: D:/VSCode WorkSpace/Project/mobile/tailwind.config.js
[Error - 5:44:00 PM] Error: Can't resolve 'nativewind/preset' in 'D:\VSCode WorkSpace\Project\mobile'
   at d (c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:130:7155)
    at c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:131:713
    at c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:134:405
    at eval (eval at create (c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:5:78), <anonymous>:15:1)
    at c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:134:405
    at eval (eval at create (c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:5:78), <anonymous>:27:1)
    at c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:134:7916
    at c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:134:405
    at eval (eval at create (c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:5:78), <anonymous>:15:1)
    at c:\Users\user\.vscode\extensions\bradlc.vscode-tailwindcss-0.14.13\dist\tailwindServer.js:134:405 {
  details: "resolve 'nativewind/preset' in 'D:\\VSCode WorkSpace\\Project\\mobile'\n" +
    '  Parsed request is a module\n' +
    '  using description file: D:\\VSCode WorkSpace\\Project\\mobile\\package.json (relative path: .)\n' +
    '    resolve as module\n' +
    '      looking for modules in D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\n' +
    '        existing directory D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\n' +
    '          using description file: D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\\package.json (relative path: .)\n' +
    '            using description file: D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\\package.json (relative path: ./preset)\n' +
    '              no extension\n' +
    "                D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\\preset doesn't exist\n" +
    '              .js\n' +
    "                D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\\preset.js doesn't exist\n" +
    '              .json\n' +
    "                D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\\preset.json doesn't exist\n" +
    '              .node\n' +
    "                D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\\preset.node doesn't exist\n" +
    '              as directory\n' +
    "                D:\\VSCode WorkSpace\\Project\\mobile\\node_modules\\nativewind\\preset doesn't exist\n" +
    "      D:\\VSCode WorkSpace\\Project\\node_modules doesn't exist or is not a directory\n" +
    "      D:\\VSCode WorkSpace\\node_modules doesn't exist or is not a directory\n" +
    "      D:\\node_modules doesn't exist or is not a directory"
}

Tried: Deleting node_modules and package-lock.json, reinstalling it with npm install, and npm install --save-dev metro. Didn't worked out.

Solution

Problem

{
  "dependencies": {
    "nativewind": "^2.0.11",
  },
}

You installed nativewind v2.0.11. This version didn’t include the nativewind/metro or nativewind/preset exports.

Solution

To use those, you need at least v4.0.0.

npm install nativewind@4

nativewind v2.0.11 - npmjs.com
nativewind v4.1.23 (current latest) - npmjs.com

What's new features from v4? - NativeWind Blog
nativewind/nativewind/expo-router - official example - GitHub
expo-starter/expo-local-first-template - template with NativeWind v4 - GitHub