Error: Missing class properties transform

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.

106081 次浏览
小开
最佳答案

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.

小开

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

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

小开

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

小开

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

小开

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']
});

小开

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

Finally discovered, To remove this error in Laravel-Mix project, add below code in webpack.mix.js

mix.webpackConfig({
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loaders: [
'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0'
]
}
],
}
});
小开

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/
}
]
}
小开

The fix in my case was defining 'transform-class-properties' plugin in the options attribute of my webpack.config.js, i'm using babel V6

 rules:[
.....,
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { plugins: ['transform-class-properties']}
}
]
小开

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 ran into this issue when I put some arrow functions into one of my classes without thinking. Once I changed the arrow functions to regular function/method definitions the error was resolved.

小开

If you are using Babel 7.4 or newer, @babel/pollify is deprecated.

Install core-js, regenerator-runtime, @babel/plugin-proposal-class-properties and babel-plugin-transform-class-properties packages.

yarn add core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --dev
// or
npm install core-js regenerator-runtime @babel/plugin-proposal-class-properties babel-plugin-transform-class-properties --save-dev

Then, add to .babelrc or babel.config.js

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

Finally, add this lines in your main js file:

import "core-js/stable";
import "regenerator-runtime/runtime";

Taked from: https://stackoverflow.com/a/54490329/9481448


提交答案