React-native-vector-icons: Module `react-native-vector-icons/Ionicons` does not exist in the Haste module map

[rudiw]

Hellooo..
I have run commands:

1. npm install react-native-vector-icons --save
2. react-native link

emulator:

Name: Pixel_XL_API_23_React_Native

CPU/ABI: Google APIs Intel Atom (x86_64)

Path: /home/rudi/.android/avd/Pixel_XL_API_23_React_Native.avd

Target: google_apis [Google APIs] (API level 23)

Skin: pixel_xl_silver

SD Card: 100M

hw.dPad: no

hw.lcd.height: 2560

runtime.network.speed: full

hw.accelerometer: yes

hw.device.name: pixel_xl

vm.heapSize: 256

skin.dynamic: yes

hw.device.manufacturer: Google

hw.lcd.width: 1440

hw.gps: yes

hw.initialOrientation: Portrait

image.androidVersion.api: 23

hw.audioInput: yes

image.sysdir.1: system-images/android-23/google_apis/x86_64/

tag.id: google_apis

showDeviceFrame: yes

hw.camera.back: virtualscene

hw.mainKeys: no

AvdId: Pixel_XL_API_23_React_Native

hw.camera.front: emulated

hw.lcd.density: 560

avd.ini.displayname: Pixel XL API 23 React Native

hw.arc: false

hw.gpu.mode: auto

hw.device.hash2: MD5:984dbf66b1aaafcdb7e89573ffb74b46

hw.ramSize: 1536

hw.trackBall: no

PlayStore.enabled: false

fastboot.forceColdBoot: no

hw.battery: yes

hw.cpu.ncore: 4

hw.sdCard: yes

tag.display: Google APIs

runtime.network.latency: none

hw.keyboard: yes

hw.sensors.proximity: yes

disk.dataPartition.size: 800M

hw.sensors.orientation: yes

avd.ini.encoding: UTF-8

hw.gpu.enabled: yes

package.json:

{
  "name": "AwesomeNativeBase",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.7.0",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.6.2"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "5.0.2",
    "jest": "23.3.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

App.js

import React from 'react';
import { Text, View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { TabNavigator, TabBarBottom } from 'react-navigation'; // Version can be specified in package.json


class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

export default TabNavigator(
  {
    Home: { screen: HomeScreen },
    Settings: { screen: SettingsScreen },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    animationEnabled: false,
    swipeEnabled: false,
  }
);

And I got error:

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"originModulePath":"/home/rudi/git/AwesomeNativeBase/App.js","targetModuleName":"react-native-vector-icons/Ionicons","message":"Unable to resolve module `react-native-vector-icons/Ionicons` from `/home/rudi/git/AwesomeNativeBase/App.js`: Module `react-native-vector-icons/Ionicons` does not exist in the Haste 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 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 `react-native-vector-icons/Ionicons` from `/home/rudi/git/AwesomeNativeBase/App.js`: Module `react-native-vector-icons/Ionicons` does not exist in the Haste 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 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 `react-native-vector-icons/Ionicons` from `/home/rudi/git/AwesomeNativeBase/App.js`: Module `react-native-vector-icons/Ionicons` does not exist in the Haste 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 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-*`.\n    at ModuleResolver.resolveDependency (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:167:1306)\n    at ResolutionRequest.resolveDependency (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:80:16)\n    at DependencyGraph.resolveDependency (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)\n    at Object.resolve (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/lib/transformHelpers.js:116:25)\n    at dependencies.map.result (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)\n    at Array.map (<anonymous>)\n    at resolveDependencies (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)\n    at /home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33\n    at Generator.next (<anonymous>)\n    at step (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)"}
processBundleResult
    BundleDownloader.java:285
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:163
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1113
run
    ThreadPoolExecutor.java:588
run
    Thread.java:818

[OMysVison]

Dup of #626，移除 node_modules/react-native/local-cli/core/fixtures/files/package.json 就可以了

[rudiw]

@OMysVison there is no directory...

[oblador]

Make sure that you actually installed the package and that it exists in node_modules. Also try clearing the caches mentioned in the error message.

[shmmly]

hi, I have the same problem , how do you resolve it?

[btxkenshin]

the same problem, have anyone resolve it?

[HanKyongIl]

the same problem, have anyone resolve it?

[Jefreesujit]

Stuck with this issue for hours. there seems to be recommended workaround by installing @expo/vector-icons , but doesnt seem to work. Is anyone looking into this issue?

[M-Ali-B]

It first asked me to install @expo/vector-icons then for fonts then for assets , I am really depressed about it

[Jefreesujit]

Same here, it asks me to install the dependencies for all expo modules. Isn't there a way, we could use this package for non expo projects?

[M-Ali-B]

I fixed it by downgrading to

"react": "16.5.0",
"react-native": "~0.55.2"

in package.json file

[rajtatata]

To everyone having this problem, I solved it by importing from the full node_modules path:
import Ionicons from '../node_modules/react-native-vector-icons/Ionicons';

If this fixes your issue, here is something interesting you can do to find out why it was happening.
Import both ways
import IoniconsA from 'react-native-vector-icons/Ionicons';
import IoniconsB from '../node_modules/react-native-vector-icons/Ionicons';

And Cmd+click / Ctrl+click both import paths, check and see if those files are the same.
In my case they were different, the first import was from some file located deep inside my AppData folder in Windows, which was really weird...

[prashantgenial]

For me it resolved by below import statement
import Icon from './node_modules/react-native-vector-icons/dist/Ionicons'