Can't resolve react-navigation/core

Question

I'm trying to build a React Native app with some navigation, and i got this error whenever i build it, i'm using expo to build the app :

Android Bundling failed 6098ms
While trying to resolve module `@react-navigation/core` from file `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/@react-navigation/native/src/ResourceSavingSceneView.js`, the package `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/@react-navigation/core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/@react-navigation/core/lib/module/index.js`. Indeed, none of these files exist:

  * /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/@react-navigation/core/lib/module/index.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/@react-navigation/core/lib/module/index.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)

I think I've already installed all dependencies, but here is my package.json in case I forgot anything :

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/core": "react-navigation/core",
    "@react-navigation/native": "react-navigation/native",
    "@react-navigation/stack": "5.9.0",
    "expo": "~42.0.1",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.8.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-paper": "^4.9.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "~3.4.0",
    "react-native-svg": "^12.1.1",
    "react-native-unimodules": "0.14.10",
    "react-native-vector-icons": "^8.1.0",
    "react-native-web": "^0.17.5",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4",
    "styled-components": "^5.3.1",
    "styled-system": "^5.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

I've already tried to update metro.config.js :

const { getDefaultConfig } = require('expo/metro-config');

module.exports = {
    resolver: {
      /* resolver options */
      sourceExts: ['jsx', 'js', 'ts', 'tsx'],
    },
    maxWorkers: 2,
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
  };
module.exports = getDefaultConfig(__dirname);

Do you guys have any idea on what's wrong ?

Answer 1

Try this:

1. Install react-navigation module.
2. Re-build your project.
3. Restart the packager by stopping the current packager and then starting the packager again with react-native start.

Unable to resolve module 'react-navigation'

Answer 2

Why do you have it like this?

"@react-navigation/core": "react-navigation/core",
"@react-navigation/native": "react-navigation/native",

They need to be correct version numbers. Follow the documentation on official website to install the packages:

https://reactnavigation.org/docs/getting-started

https://reactnavigation.org/docs/stack-navigator/