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

我已经搜索过网络并且所有修复都围绕着：升级到babel6，将“stage-0”的顺序切换为“es2015”之后。我所做的一切。

Answer 1

好的，终于在我的webpack.config.js中找到了这个：

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'

必须以与.babelrc相同的方式对待，将阶段0切换为在es2015之后，并且编译完美。

Answer 2

您需要安装babel-plugin-transform-class-properties，即

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

并将以下内容添加到您的.babelrc文件

中

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

Answer 3

我遇到此错误是因为我使用的是stage-3而不是stage-0。

Answer 4

当我不加思考地将一些箭头函数放到我的一个类中时，就遇到了这个问题。将箭头功能更改为常规功能/方法定义后，错误已解决。

Answer 5

我也遇到同样的错误，我在.babelrc中正确订购了插件，但仍然存在。删除我在webpack加载器中定义的预设参数，即可对其进行修复。

以前的webpack配置：

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

有效的webpack配置：

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

Answer 6

只要有人实际上仍然面临着同样的问题，以下博客文章确实对我有所帮助： https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

就我而言（Baby 7.9.6，打字稿3.9.2，Webpack 4.43.0），我必须执行以下操作：

运行以下命令：

npm install --save-dev @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread

创建 .babelrc 文件（是的，我以前没有一个文件，并且可以正常工作），其内容如下：

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

Answer 7

由于使用了env预设，我也遇到了这个错误： "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], 在我删除env预设后，它运作良好

Answer 8

@speak是对的，但您需要更改顺序

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

Answer 9

我使用koa-react-view遇到了同样的问题。从这些答案中获得灵感，最后使用koa server.js中的以下代码修复它：

＆＃13;

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

＆＃13;

Answer 10

最后发现，要在Laravel-Mix项目中消除此错误，请在webpack.mix.js中添加以下代码

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

Answer 11

我的解决方法是在我的 webpack.config.js 的options属性中定义'transform-class-properties'插件，我正在使用babel V6

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

Answer 12

如果您使用的是 Babel 7.4 或更新版本，@babel/pollify 已被弃用。

安装 core-js、regenerator-runtime、@babel/plugin-proposal-class-properties 和 babel-plugin-transform-class-properties 软件包。

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

然后，添加到 .babelrc 或 babel.config.js

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

最后，在你的主 js 文件中添加以下几行：

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

取自： https://stackoverflow.com/a/54490329/9481448

错误：缺少类属性转换

12 个答案: