I try to create a tab navigation in react native. But when I want to import import { createBottomTabNavigator } from 'react-navigation-tabs';. I have the following error : bundling failed: Error: Unable to resolve module `react-navigation-tabs` from `/Users/nicolasthibault/Desktop/RunApplication/Runenger/Views/NavigationReact.js`: Module `react-navigation-tabs` does not exist in the Haste module map.
I tried many commands that I found to similar topic but any of them works in my situation.
For example, I tried these ones but it doesn't solve my problem.
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-*`.
Thanks for your help.
Install react-navigation-tabs:
yarn add react-navigation-tabs
Or
npm install react-navigation-tabs
Then run metro:
react-native start --reset-cache
Also make sure you've followed the instructions here: https://reactnavigation.org/docs/en/getting-started.html
1) Install 'react-navigation-tabs' using either npm or yarn
2) Build your project using npm start --reset-cache, If you are using expo use expo r -c
It'll work.
I am facing unable to resolve module 'buffer' from react-native-ssdp.Any one knows how to fix this issue. React native version
react-native-cli: 2.0.1
react-native: 0.58.5/0.59.8
I have tried
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.
So, after digging into the component, I found that buffer and other components required by the package are under the peer dependency section of the package.json file.
This means they will not be installed locally for the package, but rather depend on what is installed in your main package.
The quickest fix was installing these packages which are required by the package.
Note that there are several such packages out there that have probably the same exact code such as react-native-ssdp, react-native-ssdp-grok and react-native-upnp.
The same solution will work for any of them.
Install these:
react-native-udp, buffer, and react-native-network-info.
Check the module's package.json for the specific requirements.
When creating a new react native project using the standard react-native init MyApp and running react-native run-ios for the first time I'm seeing the following error
error: bundling failed: Error: Unable to resolve module `#babel/runtime/helpers/interopRequireDefault` from `/Users/chrisedgington/Development/ReactNative/SixNationsPredictor/index.js`: Module `#babel/runtime/helpers/interopRequireDefault` 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 (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
at ResolutionRequest.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at /Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (/Users/chrisedgington/Development/ReactNative/MyApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)
I've tried running the suggested but still see the same issue. I've seen a few posts about similar issues but nothing specifically seems to say how to resolve the problem in react-native.
macOS: 10.13.6
node: 8.11.3
react-native-cli: 2.0.1
react-native: 0.57.1
Have a go and try:
npm add #babel/runtime
Or upgrade babel runtime:
"#babel/runtime": "7.0.0-beta.55"
I tried all the things mentioned above, and, I found myself here again tonight.
Running from a nrwl mono repo, I had to cd into the app that was having the problem and run.
jest --clearCache
You should first quit the metro terminal before executing
npm add #babel/runtime
npm install
You should add and install babel for your projects
npm add #babel/runtime
npm install
If The error is not fixed, Try:
npm start --reset-cache
The issue for me was that #babel/runtime was installed as a dev-dependency instead of just a normal (non-dev) dependency
Try to update your npm version first
npm update -g npm#version or sudo npm -gf update npm#version
and then just add the babel runtime at your react native project
npm add #babel/runtime
Try upgrading your packages. You could have an old package causing the problem:
yarn upgrade-interactive --latest
Current error message suggests these steps to fix this:
Clear watchman watches: watchman watch-del-all
Delete node_modules: rm -rf node_modules and run yarn install
Reset Metro's cache: yarn start --reset-cache
Remove the cache: rm -rf /tmp/metro-*
The last one solved it for me.
I had this problem today (April 2021), and I could solve it only by removing the webpack-node-externals package from my webpack configuration.
For me the solution was (Mac):
Stop IntelliJ
Enter terminal
Run: npx browserslist#latest --update-db -g
Run: npm cache verify
Start IntelliJ
If still not working:
Delete node_modules fron project if exists
Run: npm cache verify
Run npm install -f in project
Run: npx browserslist#latest --update-db -g
Problem:
I was in the middle of upgrading flow to typescript and I used #khanacademy/flow-to-ts to convert js files to ts. the lib not only changed the js files of the app but also it converted all js files in node_modules directory.
Solution:
I had to remove the node_modules and npm -i. This time when I checked the node_modules the interopRequireDefault.js file was there.
In case you are working with Yarn workspaces please note you are running react-native start from the right project...
Install latest Babel/runtime
=> install #babel/runtime
After that clean or reset the cache
=> npm start -- --reset-cache after
or
npm cache clean --force
I accidentally deleted my node_modules and package-lock.json. I used npm i to regenerate them and suddenly I was getting the above error. I solved it in two ways.
By uninstalling the app and using the following commands.
npx jest --clearCache
npm update
npm i
npx react-native run-android
By deleting the local repository and re-cloning it.
Hope this helps you.
I just uninstalled watchman. It worked for me.
brew uninstall watchman
Someone may find this helpful. I had the same problem while using turborepo and Expo.
Resolved it by adding 'node-linker=hoisted' to .npmrc.
Had this issue none of the above listed solutions worked for me, I had to go to node_modules/jest-haste-map/build/index.js
changed const crawl = canUseWatchman && this._options.useWatchman ? _watchman.default : _node.default;
to const crawl = canUseWatchman && this._options.useWatchman ? _node.default : _node.default;
Why? Why is react looking here? I have another test android project and it also does not have react package located there, yet it runs perfectly. Why is this one looking here? The only difference is I first did setup a directory below. In MyProject/App is where i did the init. I then moved the index.js files and package.json a level up to top level directory. I want to know the WHY of this error!
Here is the error:
error: bundling: UnableToResolveError: Unable to resolve module
react/lib/ReactComponentTreeHook from /Users/Admin/Projects/MyProject/node_modules/react- native/Libraries/Performance/Systrace.js:
Module does not exist in the module map or in these directories:
/Users/Admin/Projects/MyProject/node_modules/react- native/node_modules/react/lib
, /Users/Admin/Projects/MyProject/node_modules/react/lib
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 packager cache: rm -fr $TMPDIR/react-* or `npm start --reset-cach
All these steps I have tried. They don't fix it. I will probably do another init a level above but still I want to know whey it's looking there. Is there a module map being setup somewhere incorrectly? Where do I look for this?
UPDATE: After doing init properly in the root directory of the app I now get something else:
Loading dependency graph, done.
error: bundling: UnableToResolveError: Unable to resolve module react/lib/ReactDebugCurrentFrame from /Users/Admin/Projects/MyProjectRoot/node_modules/react-native/Libraries/Renderer/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js: Module does not exist in the module map or in these directories:
This leads to suggestions that you need alpha version of react to go along with latest react:
https://github.com/facebook/react-native/issues/13017
But doing this does not work. It just leads back to the same issue I had to begin with about ReactComponentTreeHook.
Again, same suggestions about how to fix it. rm -rf node_modules followed by npm install! But I also did a npm install --save on react react-native. I think I need some response from react-native team on how to properly interpret this kind of error. What's going on here?
Xcode 8.2 still occur same error. Three lines bellow fixed it for me :)
Downgrade react(16.0.0-alpha.12 -> 16.0.0-alpha.6) & react-native(0.45.0 -> 0.44.0)
rm -rf node_modules/react
npm i react#16.0.0-alpha.6 -S
npm i react-native#0.44.0 -S
Then run react-native run-ios
Hope this help.
The problem is that the npm init, npm install --save react -react-native does not install the correct versions. What you need to do is look at the version of react inside package.json In my case it was an alpha.
So right now need to do:
npm install --save react#16.0.0-alpha.6 react-native
but check what's inside your package.json and watch any warning messages carefully
Try install react-native-git-upgrade
$ npm install -g react-native-git-upgrade
and then run
$ react-native-git-upgrade
for me it works.
This error happens when someone upgrade react-native version.
$ npm install -g react-native-git-upgrade
$ npm install react-native#latest --save
$ react-native-git-upgrade
Close all terminals.
Then clear cache. Remove directory ~/Library/Developer/Xcode/DerivedData
In Xcode, Product-> Clean
Then run simulator from Xcode or run code on the attached device again.
The terminal where simulator is executed shows the following error:
Failed to build DependencyGraph: #providesModule naming collision:
Duplicate module name: ViewportMetrics
Paths: /Users/fcojriosbello/Documents/Development/netbeast/node_modules/react/lib/ViewportMetrics.js collides with /Users/fcojriosbello/Documents/Development/netbeast/node_modules/react-native-router-flux/node_modules/react-native-experimental-navigation/node_modules/react/lib/ViewportMetrics.js
What version of npm do you have? You have a pairDependencies problem so try to get npm v3.
Anyway if you do:
rm -rf /Users/fcojriosbello/Documents/Development/netbeast/node_modules/react-native-router-flux/node_modules/react-native-experimental-navigation/node_modules/react/
Should work