Unable to resolve module @babel/runtime/helpers/interopRequireDefault

[mr-muhammad-rehan]

Environment

System:
  OS: macOS 14.4.1
  CPU: (8) arm64 Apple M3
  Memory: 428.95 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.10.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.21
    path: /usr/local/bin/yarn
  npm:
    version: 10.2.3
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "33"
      - "33"
      - "34"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-33-ext4 | Google Play ARM 64 v8a
      - android-33-ext4 | Google Play Intel x86_64 Atom
      - android-33 | Android Automotive with Google APIs ARM 64 v8a
      - android-33 | Android Automotive with Google APIs Intel x86_64 Atom
      - android-33 | Desktop ARM 64 v8a
      - android-33 | AOSP ATD ARM 64 v8a
      - android-33 | AOSP ATD Intel x86_64 Atom
      - android-33 | ARM 64 v8a
      - android-33 | Intel x86_64 Atom
      - android-VanillaIceCream | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10227.8.2321.11479570
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.6
    wanted: 0.73.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Things I’ve done to figure out my issue

• Deleted all modules and lock file.
• Clone the codebase on another machine.
• Tried with multiple java versions.
• Ran an upgrade: [https://react-native-community.github.io/upgrade-helper/?from=0.72.3&to=0.73.6]
• Anything suggested by multiple AI Models
• Play babel.config.js

Upgrading version

From: 0.72.3. => To: 0.73.6

Description

When i start my application the build is sucessful but it throws an error: BUILD SUCCESSFUL in 1m 6s 358 actionable tasks: 16 executed, 342 up-to-date info Connecting to the development server... info Starting the app on "2aab65e4393f7ece"... Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.example/.MainActivity } BUNDLE ./index.js

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Path/to/project/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project or in these directories: node_modules

1 | /* | ^ 2 | @format 3 | */ 4 |

Reproducible demo

My Package file (can't reproduce on another project)

"dependencies": {
    "@miblanchard/react-native-slider": "^2.3.1",
    "@react-native-async-storage/async-storage": "^1.19.3",
    "@react-native-camera-roll/camera-roll": "^5.10.0",
    "@react-native-clipboard/clipboard": "^1.12.1",
    "@react-native-community/checkbox": "^0.5.16",
    "@react-native-firebase/app": "^18.6.0",
    "@react-native-firebase/messaging": "^18.6.0",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@reduxjs/toolkit": "^2.0.1",
    "@rneui/base": "^4.0.0-rc.8",
    "@rneui/themed": "^4.0.0-rc.8",
    "@vkorotenko/react-native-slide-verify": "^0.0.6",
    "axios": "^1.5.0",
    "country-state-city": "^3.2.1",
    "formik": "^2.4.3",
    "google-libphonenumber": "^3.2.33",
    "iso-countries": "^0.0.5",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-biometrics": "^3.0.1",
    "react-native-calendar-picker": "^7.1.4",
    "react-native-chart-kit": "^6.12.0",
    "react-native-circular-progress": "^1.3.9",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-dropdown-select-list": "^2.0.4",
    "react-native-haptic-feedback": "^2.2.0",
    "react-native-image-slider-box": "^2.0.7",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.8.2",
    "react-native-pager-view": "^6.2.2",
    "react-native-paper": "^5.10.1",
    "react-native-phone-number-input": "^2.1.0",
    "react-native-recaptcha-that-works": "^2.0.0",
    "react-native-safe-area-context": "^4.7.1",
    "react-native-screens": "^3.24.0",
    "react-native-share": "^9.3.0",
    "react-native-simple-toast": "^3.0.2",
    "react-native-slide-verify": "^0.0.2",
    "react-native-svg": "^13.14.0",
    "react-native-svg-uri": "^1.2.3",
    "react-native-swipeable": "^0.6.0",
    "react-native-vector-icons": "^10.0.0",
    "react-native-vision-camera": "^2.15.6",
    "react-native-webview": "^13.6.2",
    "react-redux": "^8.1.2",
    "yup": "^1.2.0"
  },

  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },

babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
};

by logging exact console.log in the catch section from the /node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:

console:

FailedToResolveNameError: Module does not exist in the Haste module map or in these directories:
  /Users/myusername/Public/react-native/ProjectName-app/node_modules
  /Users/myusername/Public/react-native/node_modules
  /Users/myusername/Public/node_modules
  /Users/myusername/node_modules
  /Users/node_modules
  /node_modules

    at Object.resolve (/Users/myusername/Public/react-native/ProjectName-app/node_modules/metro-resolver/src/resolve.js:122:9)
    at ModuleResolver.resolveDependency (/Users/myusername/Public/react-native/ProjectName-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:73:31)
    at DependencyGraph.resolveDependency (/Users/myusername/Public/react-native/ProjectName-app/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at /Users/myusername/Public/react-native/ProjectName-app/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/myusername/Public/react-native/ProjectName-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/myusername/Public/react-native/ProjectName-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async buildSubgraph (/Users/myusername/Public/react-native/ProjectName-app/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)
    at async Graph._buildDelta (/Users/myusername/Public/react-native/ProjectName-app/node_modules/metro/src/DeltaBundler/Graph.js:157:22) {
  dirPaths: [
    '/Users/myusername/Public/react-native/ProjectName-app/node_modules',
    '/Users/myusername/Public/react-native/node_modules',
    '/Users/myusername/Public/node_modules',
    '/Users/myusername/node_modules',
    '/Users/node_modules',
    '/node_modules'
  ],
  extraPaths: []

[mr-muhammad-rehan]

The issue is with Watchman not anything else this fixed: https://stackoverflow.com/questions/58989571/react-native-unable-to-resolve-module-babel-runtime-helpers-interoprequirede