How to conditionally import react-native-vector-icons dist for web

[vjsingh]

• [x] Review the documentation: https://github.com/oblador/react-native-vector-icons
• [x] Search for existing issues (including closed issues): https://github.com/oblador/react-native-vector-icons/issues

When using react-native-vector-icons on web, you have to use react-native-vector-icons/dist, per the README.

However, on a native app this results in an error that "react-native-vector-icons/dist" is not in the hashmap and couldn't be resolved.

What is the best way to conditionally import either the dist/ folder or the regular folder, depending on the platform?

[zerobytes]

couldnt you check which platform youre in, before importing, and import using a string variable?

[Naturalclar]

If you're using react-native for web, I'm assuming you'd be using webpack to bundle the js file. How I would handle it is by creating an alias for react-native-vector-icons, such that whenever a file is importing from react-native-vector-icons, you would instead be importing from react-native-vector-icons/dist

{
...
  resolve: {
    alias: {
      'react-native': 'react-native-web',
      'react-native-vector-icons': 'react-native-vector-icons/dist'
    }
  }
...
}

[keung7251]

@Naturalclar ERROR in ./index.web.js Module not found: Error: Can't resolve 'react-native-vector-icons/Fonts/FontAwesome.ttf' @ ./index.web.js 7:15-73 @ multi ./index.web.js

[mykhailo-melnyk]

@keung7251 the same error for me

[ganesh-papola]

Any updates on this issue?

[rachelang]

Thanks @Naturalclar, was having problem with having to import dist for web and no dist for mobile. This solved compilation issues, but icon still doesn't show up:

[j0siah]

For those who followed

If you're using react-native for web, I'm assuming you'd be using webpack to bundle the js file. How I would handle it is by creating an alias for react-native-vector-icons, such that whenever a file is importing from react-native-vector-icons, you would instead be importing from react-native-vector-icons/dist

{
...
  resolve: {
    alias: {
      'react-native': 'react-native-web',
      'react-native-vector-icons': 'react-native-vector-icons/dist'
    }
  }
...
}

And then ran into

@Naturalclar ERROR in ./index.web.js Module not found: Error: Can't resolve 'react-native-vector-icons/Fonts/FontAwesome.ttf' @ ./index.web.js 7:15-73 @ multi ./index.web.js

The solution is to only alias the module(s) you need not the whole library using an exact match. E.g,

    config.resolve.alias = {
      ...config.resolve.alias,
      'react-native$': 'react-native-web',
      'react-native-vector-icons/MaterialCommunityIcons$': 'react-native-vector-icons/dist/MaterialCommunityIcons'
    };