React-native-vector-icons: lib/create-icon-set.js: Support for the experimental syntax 'classProperties' isn't currently enabled

[jtparrett]

I believe this module should include some compiling beforehand, rather than expecting the users build environment to transpile features.

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,

[kapilgorve]

Using create react app to run react native web. Facing this issue. Class Properties should be added in the babel config.
If this is an acceptable solution, I would be happy to send a PR.

[zero298]

Why is this closed? This is still happening.

[gcloeval]

What is the fix here, why close it?

[jtparrett]

I closed this issue, as it's fairly standard for a react-native project to manually transpile dependencies.

However, i'm now re-opening as people above have mentioned they face similar issues with react-native-web projects

[YajanaRao]

I am not able to use vector icons in react native web because of this error. Any update on the issue ?

[jtparrett]

My advise would be to play with your Babel configuration, or migrate to a package like Expo for web... if that’s an option for you.

[jookovjook]

Found a solution for my case. My project contains config-overrides.js, so I did the next:

1. yarn add @babel/plugin-proposal-class-properties --dev

2. Added these lines to config-overrides.js

...
const appIncludes = [
    ...
    resolveApp('../node_modules/react-native-vector-icons') // <- HERE
    ]
... 
    config.module.rules[2].oneOf[1].options.plugins = [
        ...
        require.resolve('@babel/plugin-proposal-class-properties') // <- HERE
    ]...

Hope it will help

[dmsierra11]

Found a solution for my case. My project contains config-overrides.js, so I did the next:

1. yarn add @babel/plugin-proposal-class-properties --dev
2. Added these lines to config-overrides.js

...
const appIncludes = [
  ...
  resolveApp('../node_modules/react-native-vector-icons') // <- HERE
  ]
...   
  config.module.rules[2].oneOf[1].options.plugins = [
      ...
      require.resolve('@babel/plugin-proposal-class-properties') // <- HERE
  ]...

Hope it will help

Hey could you share your config-overrides.js? I am trying your solution but it doesn't work for me.

[jookovjook]

@dmsierra11 https://gist.github.com/jookovjook/d0a418643b27d9ffca986c825d94597f

[roshansingh21]

Is there any solution without ejecting the project?

[ricardoribas]

This solution seems to be valid for a non-monorepo project. If you are working with monorepo, the node_modules of the packages will have the same issue.

[louiechristie]

My advise would be to play with your Babel configuration, or migrate to a package like Expo for web... if that’s an option for you.

@jtparrett Do you mean use the whole Expo framework? I don't see an Expo for web library in the Expo SDK API?

I agree the difference between a framework and library is confusing.