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

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"
  },

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 23 (4 by maintainers)

Most upvoted comments

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:

make sure you’re using babel-preset-expo
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

brentvatne on Mar 17, 2017

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 on Feb 21, 2017

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

npm uninstall @expo/vector-icons --save

and then

npm install @expo/vector-icons --save

gakin95 on Jun 5, 2020

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

Please help I am stuck

Philrobots on Mar 18, 2020

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.

hileix on Mar 19, 2018

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

jacobrunner27 on Jun 6, 2020

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

everystone on Oct 25, 2017

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

oblador on Feb 21, 2017