SyntaxError: Unexpected token static

Question

I'm currently trying to evaluate different testing frameworks that work with React, and it turns out that Jest is on my list. However, I'm trying to use static properties outlined here: https://github.com/jeffmo/es-class-fields-and-static-properties.

So, I took the tutorial that is given on the Jest homepage, and added a static propTypes property, my code looks like this:

import React from 'react';

class CheckboxWithLabel extends React.Component {

  static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = {isChecked: false};

    // since auto-binding is disabled for React's class model
    // we can prebind methods here
    // http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    this.setState({isChecked: !this.state.isChecked});
  }

  render() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.onChange}
        />
        {this.state.isChecked ? this.props.labelOn : this.props.labelOff}
      </label>
    );
  }
}

module.exports = CheckboxWithLabel;

When I run the tests (npm test or jest), It throws the following error:

➜  jest            
Using Jest CLI v0.8.2, jasmine1
 FAIL  __tests__/CheckboxWithLabel-test.js 
● Runtime Error
SyntaxError: Desktop/jest/examples/react/CheckboxWithLabel.js: Unexpected token (5:22)

My package.json file looks like this:

{
  "dependencies": {
    "react": "~0.14.0",
    "react-dom": "~0.14.0"
  },
  "devDependencies": {
    "babel-jest": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "jest-cli": "*",
    "react-addons-test-utils": "~0.14.0"
  },
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react",
      "<rootDir>/node_modules/react-dom",
      "<rootDir>/node_modules/react-addons-test-utils",
      "<rootDir>/node_modules/fbjs"
    ],
    "modulePathIgnorePatterns": [
      "<rootDir>/node_modules/"
    ]
  }
}

Any ideas on what I'm missing here?

Thanks.

Solution 1

Any ideas on what I'm missing here?

Class properties are neither part of the es2015 nor the react preset.

You have to load the plugins that handles class properties:

npm install babel-plugin-transform-class-properties babel-plugin-syntax-class-properties

And in your .babelrc file (next to existing plugins or presets):

"plugins": [
   "syntax-class-properties",
   "transform-class-properties"
]

Solution 2

This error occurs since Standard ES2015(ES6) classes can only have methods, not properties.
For me, it was resolved by installing babel-preset-stage-0 which adds support for class properties.

npm install babel-preset-stage-0 --save-dev

Then configure Webpack (or .babelrc) to use this preset:

//...
presets: ['react', 'es2015', 'stage-0']
//...

UPDATE: As of Mid-2018, Babel env preset supports ES2015, ES2016 and ES2017. So, you can skip stage-0 preset and instead use the env preset

npm install babel-preset-env --save-dev

And then update your .babelrc to

//...
presets: ['env', 'xyz']
//...

To support latest ES2018 features like spread operator/async functions, you can add stage-3 preset.

Reference tutorial

Comments

[HappyCry]

Thanks! There's another error after this with: "SyntaxError: Unexpected token ..", any ideas?

[Matt Molnar]

Are the plugins specific to Babel 6? I have this working in 5.x just by setting stage 0. @HappyCry does it point to a particular line?

[Felix Kling]

@MattMolnar: yes, that is for Babel 6.