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've have a weird one with a react native project running both react-navigation and redux.
i need to add this package:
https://github.com/react-navigation/react-navigation-redux-helpers
i ran:
npm install react-navigation-redux-helpers
then added this line to my code:
import { createNavigationReducer } from 'react-navigation-redux-helpers';
now whenever i run the project, it fails to compile with this error:
Module `#react-navigation/core` does not exist in the Haste module map
Anyone ran into something like this before?
I've tried removing node_modules folder and package.lock file. then I tried clearing Watchman and NPM cache
Remove the node_modules folder and react-navigation-redux-helpers from package.json.
Go to the root directory of the project and remove the current node modules and install again.
rm -rf node_modules npm install
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;
The application is installed in the emulator. But it is not starting. Emulator points me out this error.
At the same time server gives following errors.
error: bundling failed: TypeError: Cannot read property
'throwIfClosureRequired' of undefined (While processing preset:
"C:\Users\sajithk\UTransP\node_modules\babel-preset-react-native\index.js")
at _default (C:\Users\sajithk\UTransP\node_modules\babel-preset-react-native\node_modules\#babel\plugin-transform-block-scoping\lib\index.js:19:36)
at Function.memoisePluginContainer (C:\Users\sajithk\UTransP\node_modules\babel-core\lib\transformation\file\options\option-manager.js:113:13)
at Function.normalisePlugin (C:\Users\sajithk\UTransP\node_modules\babel-core\lib\transformation\file\options\option-manager.js:146:32)
at C:\Users\sajithk\UTransP\node_modules\babel-core\lib\transformation\file\options\option-manager.js:184:30
at Array.map ()
at Function.normalisePlugins (C:\Users\sajithk\UTransP\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
at OptionManager.mergeOptions (C:\Users\sajithk\UTransP\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
at C:\Users\sajithk\UTransP\node_modules\babel-core\lib\transformation\file\options\option-manager.js:265:14
at C:\Users\sajithk\UTransP\node_modules\babel-core\lib\transformation\file\options\option-manager.js:323:22
BUNDLE [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
This is the first time i ran the application in the emulator after creating the project.
I had the same problem and in my case I solved it by changing the babel-preset-react-native version from 5.0.0 to 4.0.0
And follow the instructions:
Clear watchman watches: watchman watch-del-all.
Delete the node_modules folder: rm -rf node_modules && npm install.
Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
What's your babel-preset-react-native version?
Try this command:
npm install --save babel-preset-react-native#2.1.0
in console: npx react-native start
npm install react-navigation --save
I used the above fixed my issue, if anyone have same issue, just try.
if anyone know why this command can fix the issue, I am happy to learn.
Cheers
i am getting the below error.
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false
Body:
{"from":"D:\AwesomeProject\index.android.js","to":"react","message":"Unable to resolve module react from D:\\AwesomeProject\\index.android.js: Module does not exist in the module map or in these directories:\n D:\AwesomeProject\node_modules\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n 1. Clear watchman watches: watchman watch-del-all.\n 2. Delete the node_modules folder: rm -rf node_modules && npm install.\n 3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start --reset-cache.","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]}
onResponse
DevServerHelper.java:332
execute
RealCall.java:126
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1112
run
ThreadPoolExecutor.java:587
run
Thread.java:818
{"from":":\\AwesomeProject\\index.android.js","to":"react","message":"Unable to resolve module `react`
i tried every workaround given by the log still it's not working..
Check whether the folder named react exists inside node_modules named folder or not, and if it is not there then,
stop the server and again install 'react'
npm install react --save
after the installation please restart the sever by reseting the cache
npm start --reset-cache
Then run your application
Try
npm install
hopefully this resolve
There is a problem with the node module i had to remove the node module and add then i had to downgrade the the React-Native Library and Run the command react-native start and then react-native run-android after that it worked for me.