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:
-
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
-
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/
}
]
}