React-native-vector-icons: Unable to resolve module @exponent/vector-icons

[Yadro]

After I install react-native-vector-icons and imported in project, react packager throw error.

transformed 480/487 (99%)(node:5368) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 869): UnableToResolveError: Unable to resolve module @exponent/vector-icons/FontAwesome from E:\MyProjects\ReactNative\PhotoNotes\build\NoteList.js: Module does not exist in the module map or in these directories:
  E:\MyProjects\ReactNative\PhotoNotes\node_modules\@exponent\vector-icons

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-cache`.

Package.json fragment

  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.40.0",
    "react-native-bottom-sheet-behavior": "^0.1.0",
    "react-native-fs": "^2.1.0-rc.1",
    "react-native-image-picker": "^0.25.1",
    "react-native-nav": "^1.1.4",
    "react-native-photo-view": "^1.2.0",
    "react-native-vector-icons": "^4.0.0",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git",
    "react-redux": "^5.0.2",
    "redux": "^3.6.0"
  },
  "devDependencies": {
    "@types/react": "^15.0.6",
    "@types/react-native": "^0.37.11",
    "@types/react-redux": "^4.4.36",
    "babel-jest": "18.0.0",
    "babel-preset-exponent": "1.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "react-test-renderer": "15.4.2"
  },

[oblador]

Did follow the steps mentioned in the error message? If so, please post an issue at the exponent repo: https://github.com/exponent/vector-icons

[willyyang]

Similar issue here @Yadro , did you find a solution?

Unable to resolve module react-native-vector-icons/MaterialCommunityIcons from /Users/*/node_modules/react-native-elements/src/helpers/getIconType.js: Unable to find the module in its module map or any of the node_modules directories under /Users/node_modules/react-native-vector-icons/MaterialCommunityIcons and its parent directories

[willyyang]

@oblador , I followed the instructions and it didnt' solve the issue

[oblador]

@willyyang: Your issue seems to be related to react-native-elements, please report the issue there.

[RohovDmytro]

Same mistake. Anybody solved it?

[oblador]

@rogovdm The error is likely caused by a third party library using the module such as react-native-elements. Make sure you're on latest version of that library and if it's still a problem, then post an issue there with more debug info.

[15chrjef]

I have the exact same issue
Unable to resolve module @exponent/vector-icons from /Users/jchri/Desktop/payPal/client/main.js: Module does not exist in the module map or in these directories:
/Users/jchri/Desktop/payPal/client/node_modules/@exponent
, /Users/jchri/Desktop/payPal/node_modules/@exponent

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-cache.

ABI14_0_0RCTFatal
-[ABI14_0_0RCTBatchedBridge stopLoadingWithError:]
__34-[ABI14_0_0RCTBatchedBridge start]_block_invoke_2
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0

Package JSON

{
"name": "client",
"version": "0.0.0",
"description": "Hello Expo!",
"author": null,
"private": true,
"main": "main.js",
"dependencies": {
"@expo/vector-icons": "~4.0.0",
"axios": "^0.15.3",
"expo": "^14.0.2",
"react": "~15.4.0",
"react-native": "https://github.com/exponent/react-native/archive/sdk-14.0.0.tar.gz"
}
}

[oblador]

@brentvatne Any ideas?

[devanflaherty]

Same issue here!

I get the error when ever I try to include any UI library such as 'native-base' and 'shoutem'.

I've tried manually loading fonts, installing @expo/vector-icons manually.

All the tricks posted I could find but to no avail.

{ "name": "canvas", "version": "0.1.0", "private": true, "devDependencies": { "jest-expo": "^0.2.1", "react-native-scripts": "0.0.18", "react-test-renderer": "~15.4.0" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "node node_modules/jest/bin/jest.js --watch" }, "jest": { "preset": "jest-expo" }, "dependencies": { "@expo/vector-icons": "^4.0.0", "@shoutem/ui": "0.10.13", "expo": "14.0.2", "native-base": "^2.0.12", "react": "~15.4.0", "react-native": "0.42.0" } }

[Jacse]

As it says in the error message this bug is with RN and not react-native-vector-icons. It's a long standing issue: facebook/react-native#4968

[brentvatne]

not sure every problem in this thread is due to the same thing, seems like some may be other issues with your setup, but these are the instructions for how to get it working:

1. make sure you're using babel-preset-expo
2. make sure you have @expo/vector-icons installed

@expo/vector-icons is a fork of this library that uses Expo's asset system. babel-preset-expo aliases imports of react-native-vector-icons to the api compatible @expo/vector-icons

sorry for the confusion. @dikaiosune and i have been discussing upstreaming a generic font loading api that would have identical semantics to the current way of using fonts with react-native but would provide an interop hook with create-react-native-app/expo

[rgstephens]

I ran into this problem using a fork of the expo rnplay example. It's using the older @exponent versions of the packages and the fix was to

import { Ionicons } from '@exponent/vector-icons'

[SupriyaKalghatgi]

Same issue here

UnableToResolveError: Unable to resolve module `@expo/vector-icons/Ionicons` from `/myApp/node_modules/native-base/dist/src/basic/IconNB.js`: Module does not exist in the module map or in these directories:
  /myAppmyAppmyApp/node_modules/native-base/node_modules/@expo/vector-icons
,   /myApp/node_modules/@expo/vector-icons

WhereAs i dont have this library in my node_modules

Following solution worked for me

• watchman watch-del-all
• npm start -- --reset-cache

[everystone]

If anyone runs into this, what solved it for me on Windows was to delete all react packager folders in %TEMP% (C:\Usersusername\AppData\Local\Temp). I guess the old expo-version was cached and used even after I ejected, which caused the issue.

[khjoony]

import { Ionicons } from '@expo/vector-icons'; instead of.. import Ionicons from 'react-native-vector-icons/Ionicons';.

[hileix]

import Icon from 'react-native-vector-icons/FontAwesome';

There's a problem with importing it up here.

And then I'll do it like this.

import Icon from '../../node_modules/react-native-vector-icons/FontAwesome';

and recompile,it's ok to me.

I think this is an Npm problem.

[ghasemikasra39]

I have the same issue. No solution?

[waqaramjad]

i have the same issue when i install native base library

[haewhybabs]

i have the problem when i install native base library

[Philrobots]

So I have try everythings you guys have said but I am still getting the same error

Please help I am stuck

[gakin95]

If using npm try uninstalling @expo/vector-icons and reinstalling.

npm uninstall @expo/vector-icons --save

and then

npm install @expo/vector-icons --save

[Madhuri97]

If using npm try uninstalling @expo/vector-icons and reinstalling.

npm uninstall @expo/vector-icons --save

and then

npm install @expo/vector-icons --save

This worked for me Thank you

[jacobrunner27]

Ok so here is my fix for the issue. When using a specific version of react native you have to use the syntax 'react-native-gesture-handler' for {TextInput} you can't group it into 'react-native' it will give you the error code that you are seeing. To summarize use: import { TextInput } from 'react-native-gesture-handler'; and import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; as 2 separate imports you cannot group them together. I believe this is only a problem with Expo. @Yadro