javascriptreact-nativebabeljsreact-native-webreact-native-vector-icons

Error while adding react native vector icons to react native with react native web


I follow this tutorial to add react-native-web to react-native project. but I got error when adding react-native-vector-icons to project.

./node_modules/react-native-vector-icons/lib/create-icon-set.js
SyntaxError: /home/hamidreza/Desktop/myApp/node_modules/react-native-vector-icons/lib/create-icon-set.js: Support for the experimental syntax 'classProperties' isn't currently enabled (43:22):

  41 | 
  42 |   class Icon extends PureComponent {
> 43 |     static propTypes = {
     |                      ^
  44 |       allowFontScaling: PropTypes.bool,
  45 |       name: IconNamePropType,
  46 |       size: PropTypes.number,

I also change my babel.config.js to this:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true,
      },
    ],
  ],
};

or

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    '@babel/plugin-proposal-class-properties'
  ],
};

but still have the issue.

What should I do?


Solution

  • By adding

    path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
    

    to babelLoaderConfiguration issue solved.

    final web/webpack.config.js:

    const path = require('path');
    const webpack = require('webpack');
    
    const appDirectory = path.resolve(__dirname, '../');
    const babelLoaderConfiguration = {
      test: /\.js$/,
      include: [
        path.resolve(appDirectory, 'index.web.js'),
        path.resolve(appDirectory, 'src'),
        path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
        path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
        path.resolve(appDirectory, 'node_modules/react-native-elements'),
      ],
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: ['react-native'],
          plugins: ['react-native-web'],
        },
      },
    };
    
    const imageLoaderConfiguration = {
      test: /\.(gif|jpe?g|png|svg)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
        },
      },
    };
    
    module.exports = {
      entry: [path.resolve(appDirectory, 'index.web.js')],
    
      output: {
        filename: 'bundle.web.js',
        path: path.resolve(appDirectory, 'dist'),
      },
      module: {
        rules: [babelLoaderConfiguration, imageLoaderConfiguration],
      },
    
      resolve: {
        alias: {
          'react-native$': 'react-native-web',
        },
        extensions: ['.web.js', '.js'],
      },
    };