Getting an error with static properties

[shaimo]

I'm using browserify-rails with babelify and trying to compile e.g. the code here: https://facebook.github.io/relay/docs/guides-mutations.html#content Getting an error on the static property:

SyntaxError: /Users/shaimo-mbp/dev/ruby/myapp/app/assets/javascripts/components/TestComponent.js.jsx: Unexpected token (7:21)
   5 | 
   6 | class LikeStoryMutation extends Relay.Mutation {
>  7 |     static fragments = {
     |                      ^
   8 |          story: () => Relay.QL`
   9 |           fragment on Story {
  10 |             id,

My command line looks like:

    config.browserify_rails.commandline_options = '--extension=.js --extension=.js.jsx -t [ babelify --presets [ es2015 react ] --plugins ./utils/babelRelayPlugin ]'

(I tried also without one or two of the presets and also with reactify)... Is this some bug or am I doing anything wrong?

[loganfsmyth]

You are using es2015 and react and neither of those support class properties, which are not standard ES6. Standard ES6 classes can only have methods, not properties. Class properties are enabled with http://babeljs.io/docs/plugins/transform-class-properties/ so you'd need to use the plugin directly or babel-preset-stage-1 or babel-preset-stage-0

[shaimo]

Thank you! :+1:

[kopax]

Hello, Is that still the case 4 years after? https://stackoverflow.com/questions/59617327/what-is-the-appropriate-webpack-loader-to-use-static-keywords

[goto-bus-stop]

@kopax i think that's most likely a webpack loader misconfiguration. this issue is for babelify, which is the loader for browserify, not for webpack.

static fields are still a Stage 3 proposal and have not yet landed in ES, so you need to configure both babel-loader and the appropriate babel transform.