Unable to resolve module @react-navigation/native

[DiepEsc]

The error.

error: bundling failed: Error: Unable to resolve module `@react-navigation/native` from `C:\Projects\project\node_modules\react-navigation-tabs\src\views\BottomTabBar.js`: Module `@react-navigation/native` 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-*`.
    at ModuleResolver.resolveDependency (C:\Projects\project\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
    at ResolutionRequest.resolveDependency (C:\Projects\project\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
    at DependencyGraph.resolveDependency (C:\Projects\project\node_modules\metro\src\node-haste\DependencyGraph.js:219:16)
    at Object.resolve (C:\Projects\project\node_modules\metro\src\lib\transformHelpers.js:141:30)
    at dependencies.map.result (C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
    at C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
    at Generator.next (<anonymous>)
    at step (C:\Projects\project\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)

---

Current Behavior

Error

Expected Behavior

Work

How to reproduce

• Install and use react-navigation 2.18.2, react-navigation-tabs 1.0.0.
• Install and use React Native Tools on vscode.
• Uninstall react-navigation and install react-navigation 3.0.
• Create app container like this. I try clear cache, delete node_modules, run npm install again.. and the error Unable to resolve module './createNavigationContainer' was not fixed.
• Revert to react-navigation 2.18.2, delete node_modules and run npm install again, it works, but React Native Tools not work. So I try delete folder .vscode/.react, reset cache. run-anroid again, the error Unable to resolve module `@react-navigation/native occurs.
• I try reset caches, delete and run npm install, re install react-native-cli .... but problem was not fixed
• I cloned repository to another computer, and it show this error too.

Environment

software	version
react-navigation	2.18.2
react-native	0.57.4
node	10.13.0
npm	6.4.1
React Native Tools	0.6.18

[DiepEsc]

This is package-lock.json

[DiepEsc]

Sorry. This is react-navigation-tabs version problem. Not react-navigation problem.

[gwalshington]

Since updating to 3.x I'm getting Unable to resolve "@react-navigation/native" from "node_modules/react-navigation/src/react-navigation.js"

[brentvatne]

@gwalshington - you need to clear your react native packager cache

[gwalshington]

Thanks for the quick response. I have tried clearing the cache and am still getting the same error.

To confirm - I've attempted to clear by the following combination of commands:
watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro* && rm -rf $TMPDIR/haste-*
rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-*
watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start -- --reset-cache

Am I missing something? Thanks!

[brentvatne]

@gwalshington - that seems right. it's hard to say what might be going wrong, the react native packager (metro) can be tricky to work with. if you can share a project where I can reproduce this I can look into it

[gwalshington]

Okay - I'll keep working on it and if I don't make progress will ping you. Thanks!

[SOftEngrAtta]

@brentvatne i am getting the same issue , i cleared the cache also but getting the same problem

[brentvatne]

sorry this is not a react-navigation issue, this is a metro bundler or watchman issue

[gwalshington]

@SOftEngrAtta I'll call myself out and say the actual issue was I didn't read the new docs. The error was deceiving - it was actually due to the fact that I was using StackNavigator instead of the new createStackNavigator and export default DrawerNavigatorExample instead of export default createAppContainer(DrawerNavigatorExample)

Check out these updates - the error doesn't insinuate this is the issue, but it was what was wrong for me.

[adamnator92]

try drop grade to "react-navigation-tabs": "0.8.4" for "react-navigation": "^2.18.2"
i have the same error when i using react-navigation-tabs@1.0.1

[Manoj002]

@adamnator92,
im having same issue even with "react-navigation-tabs": "0.8.4" and "react-navigation": "^2.18.2"

@gwalshington,
i have updated react-navigaiton to 3.x from docs including installation of react-native-gesture-handler linking it and then changing the MainActivity.java file but then i was getting Component.router.getStatesForAction() error...
So i degraded react-navigation to 2.18.2 unlinking and uninstalling react-native-gesture-handler again changing my MainActivity.java file to what it was previously, but this erro appears as i run my application

@DiepEsc,
Can you help me out mate, by suggesting what changes are necessary to react-navigation-tabs as i havent even installed it by its present in node_modules

@brentvatne
i tried even clearing cache restarting bundle or even restarting pc but this issue persists

any help will be appreciated guys!

[mayupat13]

This may help you #26

[timothyej]

I had the same problem and tried everything that was suggested. I finally got it to work by running the second command in this step:

3. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.

Running npm start -- --reset-cache solved it for me.

[ravirdv]

if your'e using expo, following worked for me : expo r -c

[muhtar-sgk]

I had the same problem and tried everything that was suggested. I finally got it to work by running the second command in this step:

1. Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.

Running npm start -- --reset-cache solved it for me.

you saved my live

[brandonsueur]

Hi,

On my side, I just had to do expo r -c.

Thanks @ravirdv ! 👌

[smer007]

expo r -c saved my life.

[alexlevn]

I had the same problem. I tried 'watch man watch-del-all...' and '..reset cache' but no changed
And make sure u installed @react-navigation/native

yarn add @react-navigation/native

saved my life ^^

[henriquesqs]

@alexlevn thank you! This (installing the package again) solved my problem. I can't really understand why I had to do this because I was using @react-navigation/native before.

[UmarIT]

I had the same problem. I tried 'watch man watch-del-all...' and '..reset cache' but no changed
And make sure u installed @react-navigation/native

yarn add @react-navigation/native

saved my life ^^

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.