Error: Missing class properties transform

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"],

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.


Just in case anybody is actually still facing the same issue, The following blog post did help me: https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

In my case (babel 7.9.6, typescript 3.9.2, webpack 4.43.0) I had to do the following:

  1. Run the following command:

    npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread
    
  2. Create .babelrc file (yes, I didn't have one before and it did work just fine) with the following content:

    {
        "presets": [
            "@babel/env",
            "@babel/preset-typescript"
        ],
        "plugins": [
            "@babel/proposal-class-properties",
            "@babel/proposal-object-rest-spread"
        ]
    }
    

I had this same error and I ordered my plugins correctly in my .babelrc 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/
    }
  ]
}