React native web storybook react-native-vector-icons problem icon

Question

I'm developing a react native component on storybook, which uses react-native-paper and react-native-vector-icons.

The problem is that I can't see the icons, I tried to follow the guide on react-native-vector-icons, this: webpack

Below is the webpack, but I didn't quite understand how to use the second part of the code suggested in the guide, where and how I should use it.

Can anyone help me out?

webpack:

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.resolve(__dirname, './public/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  entry: path.join(__dirname, 'index.web.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, '/build'),
  },
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
      '@storybook/react-native': '@storybook/react',
      'styled-components/native': 'styled-components',
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules[/\\](?!react-native-vector-icons)/,
        use: {
          loader: 'babel-loader',
          options: {
            // Disable reading babel configuration
            babelrc: false,
            configFile: false,
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
              '@babel/preset-flow',
              '@babel/preset-typescript',
              {
                plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-object-rest-spread'],
              },
            ],
          },
        },
      },
      {
        test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
        loader: 'file-loader',
      },
      {
        test: /\.ttf$/,
        loader: 'url-loader', // or directly file-loader
        include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
      },
    ],
  },
  plugins: [HTMLWebpackPluginConfig],
  devServer: {
    historyApiFallback: true,
    contentBase: './',
    hot: true,
  },
}

Answer 1

The reason for your problem could be that your webpack.config.js is located in the folder .storybook. So you have to change the path for loading the react-native-vector-icons and add ../ before node_modules, because of the folder structure.

 ... 
 {
    test: /\.ttf$/,
    loader: 'url-loader', // or directly file-loader
    // add .. to the path for node_modules
    include: path.resolve(__dirname, '../node_modules/react-native-vector-icons'),
 },
 ...

An similar issue has been described and solved here: React Native Vector Icons don't load on react-native-web storybook