Unable to resolve module `#expo/vector-icons/fonts/Ionicons.ttf` - react-native

absolute beginner in react native here,
I'm trying to follow the react native tutorial in here, and I get the following error when trying to run the second app version (v0.1.1).
I'm using expo to create the project, as suggested in the tutorial.
I tried deleting node_modules and re-installing the dependencies, I tried doing the steps suggested in the error.
I googled the error and tried the steps suggested here (removing babel-preset-expo from dependencies and re-installing them), but nothing helped.
Is this a version issue? I see that Ionicons.ttf does exist under node_modules\#expo\vector-icons, but in a different path, #expo/vector-icons/website/src/fonts
The development server returned response error code: 500
URL: http://192.168.1.102:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false&assetPlugin=%2FUsers%2Fyossiv%2Fgit%2Fqr-scanner%2Fnode_modules%2Fexpo%2Ftools%2FhashAssetFiles.js
Body: {"originModulePath":"/Users/yossiv/git/qr-scanner/App.js",
"targetModuleName":"#expo/vector-icons/fonts/Ionicons.ttf",
"message":"Unable to resolve module `#expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `#expo/vector-icons/fonts/Ionicons.ttf` 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-*`.","errors":[{"description":"Unable to resolve module `#expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `#expo/vector-icons/fonts/Ionicons.ttf` 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-*`."}],"name":"Error","stack":"Error: Unable to resolve module `#expo/vector-icons/fonts/Ionicons.ttf` from `/Users/yossiv/git/qr-scanner/App.js`: Module `#expo/vector-icons/fonts/Ionicons.ttf` 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/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:209:1301)
at ResolutionRequest.resolveDependency (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:83:16)
at DependencyGraph.resolveDependency (/Users/yossiv/git/qr-scanner/node_modules/metro/src/node-haste/DependencyGraph.js:238:485)
at Object.resolve (/Users/yossiv/git/qr-scanner/node_modules/metro/src/lib/transformHelpers.js:180:25)
at dependencies.map.result (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:311:29)
at Array.map (<anonymous>)
at resolveDependencies (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:307:16)
at /Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:164:33
at Generator.next (<anonymous>)
at step (/Users/yossiv/git/qr-scanner/node_modules/metro/src/DeltaBundler/traverseDependencies.js:266:307)"} processBundleResult
BundleDownloader.java:300 access$200
BundleDownloader.java:37 onChunkComplete
BundleDownloader.java:224 emitChunk
MultipartStreamReader.java:76 readAllParts
MultipartStreamReader.java:154 processMultipartResponse
BundleDownloader.java:208 access$100
BundleDownloader.java:37 onResponse
BundleDownloader.java:169 c
RealCall.java:135 run
NamedRunnable.java:32 runWorker
ThreadPoolExecutor.java:1133 run
ThreadPoolExecutor.java:607 run
Thread.java:761

you have to do npm install --save #expo/vector-icons
and change imports path #expo/vector-icons/fonts/... by the new route #expo/vector-icons/website/src/fonts/... in the files you call that font.
example
import IoniconsFont from '#expo/vector-icons/fonts/Ionicons.ttf';
by
import IoniconsFont from '#expo/vector-icons/website/src/fonts/Ionicons.ttf';

A conflict may occur due to module installation using the same icon.
npm install --save #expo/vector-icons

Related

React Native 0.59 -> 0.60 - Unable to resolve module `NativeModules`

I want to make sure that my native library works on 0.6x React Native. I've got a version of the library working on 0.59.x but when I run it on 0.6x I get the following json response (together with server 500):
Body:
{"originModulePath":"screens/custom-action-screen.js","targetModuleName":"NativeModules","message":"Unable to resolve module `NativeModules` from `screens/custom-action-screen.js`: NativeModules could not be found within the project.\n\nIf you are sure the module exists, try these steps:\n 1. Clear watchman watches: watchman watch-del-all\n 2. Delete node_modules: rm -rf node_modules and run yarn install\n 3. Reset Metro's cache: yarn start --reset-cache\n 4. Remove the cache: rm -rf /tmp/metro-*","errors":[{"description":"Unable to resolve module `NativeModules` from `screens/custom-action-screen.js`: NativeModules could not be found within the project.\n\nIf you are sure the module exists, try these steps:\n 1. Clear watchman watches: watchman watch-del-all\n 2. Delete node_modules: rm -rf node_modules and run yarn install\n 3. Reset Metro's cache: yarn start --reset-cache\n 4. Remove the cache: rm -rf /tmp/metro-*"}],"name":"Error","stack":"Error: Unable to resolve module `NativeModules` from `screens/custom-action-screen.js`: NativeModules could not be found within the project.\n\nIf you are sure the module exists, try these steps:\n 1. Clear watchman watches: watchman watch-del-all\n 2. Delete node_modules: rm -rf node_modules and run yarn install\n 3. Reset Metro's cache: yarn start --reset-cache\n 4. Remove the cache: rm -rf /tmp/metro-*\n at ModuleResolver.resolveDependency (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:186:15)\n at ResolutionRequest.resolveDependency (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)\n at DependencyGraph.resolveDependency (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)\n at Object.resolve (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/lib/transformHelpers.js:267:42)\n at /Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:426:31\n at Array.map (<anonymous>)\n at resolveDependencies (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:423:18)\n at /Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33\n at Generator.next (<anonymous>)\n at asyncGeneratorStep (/Users/krzysztofkubicki/Workspace/PublicRelease/React-Native-Dev/SampleApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)"}
So my quetion is: How is it possible that the NativeModules were "visible" in previous version? All I did was upgrade the react native version and left all the code as it was.
It still works on 0.59.

Module `react-navigation-tabs` does not exist in the Haste module map

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.

react-native bundle failed on first attempt

It was my first attempt to start react-native by: react-native run-android on windows 10
My java version is 8.
The node cmd fails and does not perform bundle step completely
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-*`.
these are steps the bundle asked to try but I haven't installed watchman or any other stuff it's looking for
I installed node android and java
could someone help me out on how to run this?
this is the error on node cmd
This is the error result
React Native 0.56 is broken [1] [2] on Windows.
For the time being, you can create your new RN app in version 0.55.4 using:
react-native init myApp --version 0.55.4

Error when try to import axios on iOS platform

I create a React-Native project using Windows 10 and it works perfectly on Android.
I copy the files to my iMac and run the project in the iOS platform, but when I try to run the project in iOS I got the following error:
error: bundling failed: Error: Unable to resolve module `axios` from `/Users/fabio/react/VirtusVSTS/src/components/Login.js`: Module does not exist in the 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/fabio/react/VirtusVSTS/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:158:1476)
at ResolutionRequest.resolveDependency (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:92:16)
at DependencyGraph.resolveDependency (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/node-haste/DependencyGraph.js:271:4465)
at dependencies.map.relativePath (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:379:19)
at Array.map (<anonymous>)
at resolveDependencies (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:378:16)
at /Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:203:33
at Generator.next (<anonymous>)
at step (/Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:296:307)
at /Users/fabio/react/VirtusVSTS/node_modules/metro/src/DeltaBundler/traverseDependencies.js:296:467
The problem is related to the axis import.
I try to create a new project in my iMac and import axis on it. It works perfectly.
But now I don't know what is happening with the project that I create on Windows, why it can't import the axis module on iMac.
I run all the steps that appear in the error message to try to fix the problem, but it won't work.
How I can fix this problem?
The axios module folder is not present in my node_modules folder. The comments from user #needsleep help me understand why the axios module was not present in my React Native project.
I begin to use Yarn and use it to install the axios module(yarn add axios) and it works now.
remove axios and after in install using yarn and it's working fine

Error after upgrading from React Native 0.45.1 to 0.46.4

error: bundling failed: "Unable to resolve module `ReactNative` from `C:\\AnchorDev\\Anchor\\node_modules\\react-native\\Libraries\\react-native\\react-native-implementation.js`: Module does not exist in the module map\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`."
This is the error that I received after upgrading React Native from 0.45.1 to 0.46.4. I ran npm i but I still get the error. How do I resolve it?
Try deleting node_modules folder and install packages again with npm install