Failed to compile when using react-native-elements in create-react-native-web-app project

I’ve been redirected from here.

Explain what you did Trying to create a react-native web project, following this tutorial

The bug When adding react-native-elements and react-native-vector-icons, and editing the webpack as described in the walkthrough, I receive

Failed to compile.

./node_modules/react-native-ratings/src/SwipeRating.js
SyntaxError: /Users/arthur/workspace/ReactNativeWorkspace/sfcc/web-sandbox-test/node_modules/react-native-ratings/src/SwipeRating.js: Support for the experimental syntax 'classProperties' isn't currently enabled (41:23):

  39 | 
  40 | export default class SwipeRating extends Component {
> 41 |   static defaultProps = {
     |                       ^
  42 |     type: 'star',
  43 |     ratingImage: require('./images/star.png'),
  44 |     ratingColor: '#f1c40f',

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

when running yarn web

To Reproduce To reproduce you can simply follow along the instructions in the walkthrough, and when you replace <TouchableHighlight> with <Button> you should receive the same error

Environment

software	version
react-native-vector-icons	^6.2.0
react-native-elements	^1.0.0
react-native	0.55.x
npm	6.5.0
yarn	1.13.0
OS	macOS High Sierra 10.13.4

[haruelrovix]

@arthurpankiewicz @thorakmedichi as suggested by @iRoachie , if you guys following this tutorial, you just need to add react-native-ratings and react-native-status-bar-height to webpack config.

  // Process JS with Babel.
  {
    test: /\.(js|jsx|mjs)$/,
    include: [
      paths.appSrc,
      `${paths.appNodeModules}/react-native-elements`,
      `${paths.appNodeModules}/react-native-ratings`,
      `${paths.appNodeModules}/react-native-status-bar-height`,
      `${paths.appNodeModules}/react-native-vector-icons`
    ],
    loader: require.resolve('babel-loader')

RNE version:

    "react-native-elements": "^1.1.0",
    "react-native-vector-icons": "^6.1.0",

Result:

See this PR for more details, #1.

[iRoachie]

Hey @arthurpankiewicz you may have to add react-native-ratings to you webpack config as well https://gist.github.com/haruelrovix/01d335dfcabec17a6aa5bc7a53fef277. Let me know if that works