React-native-vector-icons: Unable to resolve module react-native-vector-icons from.. Invalid directory /Users/node_modules/react-native-vector-icons/..

Created on 31 Dec 2015 · 13Comments · Source: oblador/react-native-vector-icons

Hey, for some reason when trying to:
var Icon = require('react-native-vector-icons/FontAwesome');

I am receiving an error stating that it is trying to load this from /Users/react-native

instead of my actual project directory: /User/Ryan/Project/...

Any ideas?

Source

ryandury

Most helpful comment

Resolved by doing what looks like flushing the cache.

1) watchman watch-del-all

2) rm -rf $TMPDIR/react-packager-*

ryandury on 31 Dec 2015

👍10

All 13 comments

Resolved by doing what looks like flushing the cache.

1) watchman watch-del-all

2) rm -rf $TMPDIR/react-packager-*

ryandury on 31 Dec 2015

👍10

I'm currently getting this as well but running the steps above does not resolve the issue. Any other tricks to this?

phonghho on 26 Jan 2016

@phonghho: Did you try restarting packager?

oblador on 27 Jan 2016

👍1

Ahh! Thanks @oblador ! That cleared the error.

phonghho on 27 Jan 2016

irfaan on 27 Jan 2016

If this helps any1. I was having the same problem and a simple "npm install react-native-vector-icons@~4.0.0 -S" and then "npm install -- --reset-cache" did the trick for me.

marrionluaka on 13 Feb 2017

❤1

After adding
import Icon from 'react-native-vector-icons/FontAwesome'; in App.js

I am getting error . Failed to compile

/node_modules/react-native-vector-icons/lib/create-icon-set.js
Module parse failed: Unexpected token (35:21)
You may need an appropriate loader to handle this file type.
|
| class Icon extends Component {
| static propTypes = {
| name: IconNamePropType,
| size: PropTypes.number,

Any one help me out

patialmanoj on 4 Nov 2017

this is happened every time that i install a new module with npm or yarn, is there any definitive fix? is a pain in the ass, every time copy and paste this ...

cinder92 on 16 Feb 2018

@patialmanoj Did you end up figuring out how to fix the error?

traviswimer on 28 Mar 2018

@traviswimer No bro.
I gave up on this.

patialmanoj on 29 Mar 2018

@patialmanoj Well, good news, I actually did figure it out. The problem is when building for the web certain ES features aren't supported without Babel. With the default Webpack config, node_modules are not passed through Babel. So, this package needs to be included in the loader. For example something like this:

  // Process JS with Babel.
  {
    test: /\.(js|jsx|mjs)$/,

    include: [
        paths.appSrc,

        // Add this line:
        paths.appNodeModules + '/react-native-vector-icons/'
    ],

    loader: require.resolve('babel-loader')
  }

Although, I should point out that I had this problem with a different package, so I can't say for certain if this will work for you.

traviswimer on 1 Apr 2018

👍2 👎1

++++++++fffff

MahmoudShaeer on 16 Jul 2020

Sorry to reopen a very much closed issue. I came across the issue described by @patialmanoj and found/documented a solution on Stack Overflow. I am repeating that solution here seeing as a direct solution was never given and this issue shows up in Google search.