Variable assignment in class scope works in React but not in ES6

Question

This ReactJS code is valid and produces the desired output:

import React from 'react'

class MyComponent extends React.Component {
  state = {'x': 1}

  render() {
    console.log('render: this.state:', this.state)
    return <div>{this.state.x}</div>
  }
}

export default MyComponent

But this very similar ES6 code causes error when running with Node.js:

class MyComponent {
  state = {'x': 1}

  render() {
    console.log('render: this.state:', this.state)
    return <div>{this.state.x}</div>
  }
}

let c = new MyComponent()
c.render()

Here is the error:

$ node foo.js 
/Users/lone/foo.js:2
  state = {'x': 1}
        ^

SyntaxError: Unexpected token =

Why does the second example lead to error when the first example runs fine with ReactJS?

That's not "ES6" code. It's technically not even ES-anything yet. — evolutionxbox
– evolutionxbox, Commented May 8, 2019 at 9:14

Nicholas Tower · Accepted Answer · 2019-05-07 17:08:03Z

3

That syntax is not yet a standard part of javascript (it's currently a stage 3 proposal). It can be used with the help of babel's class-properties plugin to transpile it into standard javascript. Most likely your react project includes this plugin, which is why it works for you in react. Create-react-app, for example, includes the plugin. Without the plugin, react can't use that syntax either.

answered May 7, 2019 at 17:08

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maazadeeb · Accepted Answer · 2019-05-07 17:13:02Z

0

As already mentioned, this is not yet standard and create-react-app has a transpilation babel plugin. But you could make it work by using a flag on Node >= 10.9. The flag is --js-flags="--harmony".

Source

answered May 7, 2019 at 17:13

maazadeeb

6,1122 gold badges32 silver badges41 bronze badges

Collectives™ on Stack Overflow

Variable assignment in class scope works in React but not in ES6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related