CODEWITHSUNDEEP
javascriptiosreactjsreact-nativeexpo
Austin Atendido
Austin Atendido

Reputation: 35

Unable to resolve module 'react-navigation' from .../App.js: Module 'react-navigation' does not exist in the Haste module map

I have just setup an app to start building it out and I keep getting this error from my App.js. This is a part of a udemy course in which I have followed every instruction to a T... so I am beyond confused of what the hell is happening and I have followed every suggestion I can find. Unable to resolve module react-navigation from /Users/3x7r3m157/Development/React-Native/food/App.js: Module react-navigation does not exist in the Haste module map.

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.

facebook::ReactABI35_0_0::JSIExecutor::defaultTimeoutInvoker(std::__1::function<void ()> const&, std::__1::function<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > ()>)
facebook::ReactABI35_0_0::JSIExecutor::defaultTimeoutInvoker(std::__1::function<void ()> const&, std::__1::function<std::__1::basic_string<char, std::__1::char_traits<char>, std::__1::allocator<char> > ()>)
ED0789CD-8D80-39F4-9651-D8707D9C0337
ED0789CD-8D80-39F4-9651-D8707D9C0337
_dispatch_main_queue_callback_4CF
97285ACB-7B21-393A-ABF6-03F1DBB5D2A2
97285ACB-7B21-393A-ABF6-03F1DBB5D2A2
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
Exponent
0DC9A4BA-C3E8-3487-99DB-1B5C86597AF5

Here is my App.js:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import SearchScreen from './src/screens/SearchScreen';

const navigator = createStackNavigator ({
  Search: SearchScreen
}, {
  initialRouteName: 'Search',
  defaultNavigationOptions: {
    title: 'BusinessSearch'
  }
});

export default createAppContainer(navigator);

Upvotes: 0

Views: 4374

Answers (3)

Janed Essad
Janed Essad

Reputation: 21

First of all you have to use CMD to run this commands.

  1. If your system is Windows, set your environment variable, add %SystemRoot%\system32 to your PATH I met this error yesterday，hope it works to you. Don't forget to reboot you PC.

After that :

  1. Create your project : npx expo-cli init <projectname>

Then :

  1. Install React Navigation :

    npm install react-navigation

  2. Install Dependencies :

    expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

  3. Install React Navigation Stack :

    npm install react-navigation-stack @react-native-community/masked-view

  4. Start the app and clear cache with npm start -c.

Update Imports Our imports in the upcoming lecture will now look like this :

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

Errors?

If you are still seeing errors and complaints about packages, do the following :

  1. rm -r node_modules

  2. rm package-lock.json

  3. expo upgrade

  4. npm start -c

Upvotes: 2

chandru
chandru

Reputation: 139

Do this it will definitely work :

npm install --legecy-peer-deps react-navigation

or

npm install --legecy-peer-deps react-navigation --force

Upvotes: 1

Matt
Matt

Reputation: 3642

Make sure to install react-navigation with npm i react-navigation

Upvotes: 2

Related Questions