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

You need to install @babel/plugin-proposal-class-properties:

npm install @babel/plugin-proposal-class-properties --save-dev 

or

yarn add @babel/plugin-proposal-class-properties --dev 

and add the following to your Babel configuration file - usually .babelrc or babel.config.js.

"plugins": ["@babel/plugin-proposal-class-properties"], 

Answer 2

OK, finally figured this out, in my webpack.config.js I had:

module: {     loaders: [       {         test: /\.js?$/,         exclude: /(node_modules|bower_components)/,         loaders: [           'react-hot',           'babel?presets[]=react,presets[]=es2015,presets[]=stage-0'         ]       }     ]   } 

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

Has to be treated in the same way as .babelrc, switched stage-0 to be after es2015 and it compiles perfectly.