Error: Missing class properties transform

Question

Error: Missing class properties transform

Test.js:

export class Test extends Component {
  constructor (props) {
    super(props)
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

.babelrc:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-class-properties"]
}

package.json:

"babel-core": "^6.5.1",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",

I have scoured the web and all fixes revolve around: Upgrading to babel6, switching the order of "stage-0" to be after "es2015". All of which I have done.

Answer 1

I had this error because I was using stage-3 instead of stage-0.

Answer 2

@speak is right, but you need to change the order

loaders: [
  'react-hot',
  'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'
]

Answer 3

You need to install babel-plugin-transform-class-properties, that is

npm install babel-plugin-transform-class-properties --save-dev

and add the following to your .babelrc file

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

Answer 4

I also meet this error because of the using of env presets: "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], and after I remove the env presets, it works well

Answer 5

I met the same problem using koa-react-view. Get inspired by these answers and finally fixed it with the following code in the koa server.js:

const register = require('babel-register');

register({
    presets: ['es2015', 'react', 'stage-0'],
    extensions: ['.jsx']
});

Answer 6

I had this same error and I ordered my plugins correctly but it still persisted. Removing the preset parameters I defined in my webpack loader fixed it.

Former webpack config:

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    }
  ]
}

Working webpack config:

module: {
  rules: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/
    }
  ]
}