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

Question

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?

score 6 · Accepted Answer · answered Jun 07 '20 at 10:24

6

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'],
  },
};

answered Jun 07 '20 at 10:24

BeHappy

3,705
5
18
59

Hey I added the webpack.config.js. The script in package.json runs using "web": "react-scripts start", I used the same tutorial. How can I configure it to use my custom webpack config, I'm stuck on the same error. Can you expand on your setup a bit more, would be really helpful, thanks. – Rishabh Bhatia Apr 30 '21 at 15:23
@RishabhBhatia I just change `web/webpack.config.js` to what is in answer. – BeHappy Apr 30 '21 at 18:07
there's no web folder in the tutorial? did you manually create a folder web in root and add the above webpack.config.js file? also any changes in package.json or babel.config.js – Rishabh Bhatia Apr 30 '21 at 20:02
2

@RishabhBhatia Follow this: https://reactnativeelements.com/docs/web_usage – BeHappy Apr 30 '21 at 21:32
1

works, that was the missing piece. What a good start to the weekend, I'm a happy man. thanks! – Rishabh Bhatia May 01 '21 at 09:37
@RishabhBhatia Be Happy :) and make me happy by up voting my question and answer :) tnx – BeHappy May 01 '21 at 12:24

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

1 Answers1