Upgrading from Expo SDK 43 to 44 resulted in While trying to resolve module `@react-navigation/native error

Expo SDK
1

Please provide the following:

  1. SDK Version: 44
  2. Platforms(Android/iOS/web/all): iOS
  3. Upgrading from 43 to 44

I upgraded from Expo SDK 43 to 44, and when I open the app, I run into this error:

iOS Bundling failed 1203ms
While trying to resolve module `@react-navigation/native` from file `/Users/vaibhavverma9/Desktop/simmer2/App.tsx`, the package `/Users/vaibhavverma9/Desktop/simmer2/node_modules/@react-navigation/native/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/vaibhavverma9/Desktop/simmer2/node_modules/@react-navigation/native/dist/index.js`. Indeed, none of these files exist:

  * /Users/vaibhavverma9/Desktop/simmer2/node_modules/@react-navigation/native/dist/index.js(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.cjs|.native.cjs|.cjs|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.native|.native.native|.native|.ios.ios|.native.ios|.ios)
  * /Users/*/Desktop/simmer2/node_modules/@react-navigation/native/dist/index.js/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.cjs|.native.cjs|.cjs|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.native|.native.native|.native|.ios.ios|.native.ios|.ios)

There are a couple things I’ve tried to resolve this error including clearing the cache of my React Native project with watchman (How to clear react-native cache?), restarting simulators, deleting node_modules + re-installing, and editing the metro.config.js file (However, this package itself specifies a main module field that could not be resolved).

Nothing has quite done the trick.

For context, this is my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@apollo/client": "^3.3.8",
    "@gorhom/bottom-sheet": "^2",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/datetimepicker": "4.0.0",
    "@react-native-community/hooks": "^2.6.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.11.7",
    "@react-navigation/native": "react-navigation/native",
    "@react-navigation/stack": "^5.14.2",
    "@sentry/react-native": "^3.3.5",
    "apollo-link-ws": "^1.0.20",
    "axios": "^0.21.1",
    "crypto-js": "^4.0.0",
    "expo": "^44.0.0",
    "expo-analytics-segment": "~11.1.0",
    "expo-application": "~4.0.1",
    "expo-blur": "~11.0.0",
    "expo-clipboard": "~2.1.0",
    "expo-constants": "~13.0.1",
    "expo-contacts": "~10.1.0",
    "expo-device": "~4.1.0",
    "expo-firebase-recaptcha": "~2.1.0",
    "expo-image-picker": "~12.0.1",
    "expo-linear-gradient": "~11.0.3",
    "expo-linking": "~3.0.0",
    "expo-location": "~14.0.1",
    "expo-media-library": "~14.0.0",
    "expo-status-bar": "~1.2.0",
    "expo-store-review": "~5.1.0",
    "expo-updates": "~0.11.6",
    "firebase": "8.2.3",
    "graphql": "^15.5.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-doorman": "^1.4.0",
    "react-native-elements": "^3.1.0",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-google-places-autocomplete": "^2.2.0",
    "react-native-maps": "0.29.4",
    "react-native-paper": "^4.11.2",
    "react-native-reanimated": "~2.3.1",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",
    "react-native-webview": "11.15.0",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "sentry-expo": "^4.0.0",
    "subscriptions-transport-ws": "^0.9.18"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-dom": "~17.0.9",
    "@types/react-native": "~0.64.12",
    "eslint-config-nando": "^1.1.0",
    "typescript": "~4.3.5"
  },
  "private": true
}

And this is my current metro.config.js:

const {getDefaultConfig} = require('metro-config');
const {resolver: defaultResolver} = getDefaultConfig.getDefaultValues();

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    ...defaultResolver,
    sourceExts: [...defaultResolver.sourceExts, 'cjs', 'jsx', 'json', 'js', 'ts', 'tsx', 'native', 'ios'],
  },
};

Does anyone know how I can resolve this issue?

2

I had to update the metro.config.js to the following!

const {getDefaultConfig} = require('metro-config');
const {resolver: defaultResolver} = getDefaultConfig.getDefaultValues();

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {                              
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
  },
};
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.