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

[paddy10tellys]

Describe the bug
When running yarn web I am getting this error

  ./node_modules/react-native-ratings/src/SwipeRating.js
SyntaxError: /home/pmy/gitphone/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.

To Reproduce
Steps to reproduce the behaviour:

Follow this tutorial by https://levelup.gitconnected.com/@haruelrovix
Create a boilerplate by running CRWNA. Install & link RNE & RVI. Make a basic home component, consisting of two input fields and one Submit button.

yarn web

Expected behaviour
web version to run

Desktop (please complete the following information):

• OS: Ubuntu 16.04
• Browser Chrome
• Version 74.0.3729.108 (Official Build) (64-bit)

Smartphone (please complete the following information):
yarn android works fine

Additional context
This is my tutorial repo showing the guilty code…

I tried adding things to babel.config.js based on StackOverflow comments but without success

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      ["module:metro-react-native-babel-preset"],
      ['react-app']
    ],
    ignore: [ "node_modules/art/core/color.js" ],
    plugins: [    
      ["module-resolver", {
        "alias": {
          "^react-native$": "react-native-web"
        }
      }],
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      ['@babel/plugin-syntax-dynamic-import'],
      ['@babel/plugin-transform-regenerator'],  
      ['@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
        },
      ]    
    ],
  };
};

#44 solved by @obiwankenoobi has similarities but somewhat beyond my limited programming experience...

I asked stack overflow question

[obiwankenoobi]

1. go to the module.exports part in ./config/paths.js (in your project of course) and add the line swiper: resolveApp('node_modules/react-native-ratings'),

2. go to the line include: paths.appSrc in ./config/webpack.config.dev.js and change it to include: [paths.appSrc, paths.swiper],

3. go to the line include: paths.appSrc in ./config/webpack.config.prod.js and change it to include: [paths.appSrc, paths.swiper],

4. reboot the app

[paddy10tellys]

No joy I'm afraid.

However, yarn web version does work with earlier versions of react-native-ratings, as does the excellent-looking tutorial I'm following - so I'm still moving forward!

Working code posted to my tutorial repo

new issue opened at https://github.com/Monte9/react-native-ratings under the title "non-standard code breaks create-react-native-web-app

[BobbyBorisov]

@paddy10tellys I just stumbled on this issue and i got another error which I cannot solve https://d.pr/free/i/ssKTrS. Any clues?

[orYoffe]

@paddy10tellys in newer version of react native web (I believe after v0.11.7) support for ViewPropTypes was removed.. you can emulate it yourself or change your props to not use it