React Native | Error: Unable to resolve module in node_modules/react-native/index.js

Question

Whenever I run my React native App with react-native run-ios I get the following error:

Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from /Users/antonhorl3/WebstormProjects/sagly/client/node_modules/react-native/index.js:

None of these files exist: node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx) node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.js|.js|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx) 15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator'; 16 | import typeof Button from './Libraries/Components/Button'; 17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS'; | ^ 18 | import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid'; 19 | import typeof FlatList from './Libraries/Lists/FlatList'; 20 | import typeof Image from './Libraries/Image/Image'; at ModuleResolver.resolveDependency (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:107:15) at DependencyGraph.resolveDependency (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/node-haste/DependencyGraph.js:288:43) at Object.resolve (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/lib/transformHelpers.js:129:24) at resolve (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33) at /Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26 at Array.reduce () at resolveDependencies (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33) at processModule (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31) at async addDependency (/Users/antonhorl3/WebstormProjects/sagly/client/node_modules/@react-native-community/cli-plugin-metro/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18) at async Promise.all (index 0)`

I did not make any changes to my code, the issue just came up. I did update Xcode, that is only change I think I have made. I am very lost.

The import statement in the react-native module is correct, and the file do exist.

This is my environment:

 System:
    OS: macOS 13.2.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 40.24 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 23, 26, 29, 30, 31
      Build Tools: 19.1.0, 23.0.1, 23.0.3, 27.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0, 33.0.0
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7199119
    Xcode: 14.3/14E222b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 5.0.1-alpha.2 => 5.0.1-alpha.2 
    react: 18.0.0-rc.0 => 18.0.0-rc.0 
    react-native: 0.65.3 => 0.65.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

If you need more information I am happy to add or edit my question.

Thanks for the help.

What I have tried:

• Restarting my Laptop
• react-native start -- --reset-cache
• rm -rf /tmp/metro-*
• yarn start --reset-cache
• watchman watch-del-all
• deleting node_modules and reinstalling them

The app should run without this error.

This is my package.json:

{
  "name": "client",
  "version": "0.0.1",
  "private": true,
  "rnpm": {
    "assets": [
      "assets/fonts"
    ]
  },
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "1.2.36",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/react-native-fontawesome": "0.2.7",
    "@invertase/react-native-apple-authentication": "2.1.5",
    "@notifee/react-native": "^5.2.1",
    "@react-native-async-storage/async-storage": "1.15.14",
    "@react-native-community/cli": "5.0.1-alpha.2",
    "@react-native-community/masked-view": "0.1.11",
    "@react-native-community/netinfo": "7.1.7",
    "@react-native-firebase/app": "^14.8.0",
    "@react-native-firebase/messaging": "^14.8.0",
    "@react-native-google-signin/google-signin": "7.0.1",
    "@react-native-picker/picker": "^1.8.3",
    "@react-navigation/native": "6.0.2",
    "@react-navigation/stack": "5.14.4",
    "i18next": "^21.8.14",
    "jwt-decode": "3.1.2",
    "lodash": "4.17.21",
    "moment": "^2.29.4",
    "raygun4reactnative": "1.1.5",
    "react": "18.0.0-rc.0",
    "react-i18next": "^11.18.1",
    "react-native": "0.65.3",
    "react-native-android-keyboard-adjust": "1.2.0",
    "react-native-codegen": "0.0.7",
    "react-native-eject": "^0.2.0",
    "react-native-elements": "3.3.2",
    "react-native-fast-image": "^8.6.3",
    "react-native-fs": "^2.19.0",
    "react-native-gesture-handler": "1.10.3",
    "react-native-google-mobile-ads": "^9.1.1",
    "react-native-iap": "^12.8.3",
    "react-native-image-picker": "^4.7.3",
    "react-native-image-resizer": "^1.4.5",
    "react-native-in-app-review": "^4.1.1",
    "react-native-localize": "^2.2.2",
    "react-native-offline": "^6.0.0",
    "react-native-purchases": "^5.13.0",
    "react-native-ratings": "^8.1.0",
    "react-native-responsive-screen": "1.4.2",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "3.6.0",
    "react-native-searchable-dropdown": "^1.1.3",
    "react-native-share": "^7.3.6",
    "react-native-snap-carousel": "3.9.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "12.1.1",
    "react-native-triangle": "^0.0.9",
    "react-native-vector-icons": "8.1.0",
    "react-native-view-shot": "^3.1.2",
    "react-native-webview": "11.6.4",
    "react-native-wheel-scroll-picker": "^0.2.4",
    "react-native-youtube-iframe": "2.1.0",
    "react-navigation": "4.4.4",
    "react-navigation-stack": "2.10.4",
    "styled-components": "^5.3.5",
    "tcomb-form-native": "0.6.20"
  },
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/runtime": "7.13.10",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.23.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.65.2",
    "react-native-clean-project": "^4.0.1",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

There is a known issue with Xcode version 14.3. See https://github.com/facebook/react-native/issues/36635.

Answer 2

For those who have some strict deadlines, and can't wait for the fixes at the moment, simply downgrade your Xcode version from 14.3 to 14.2, or any other version that you had installed previously.

In my case, downgrading from version 14.3 to 14.2 resolved my issue.

You can download older versions of Xcode from here.