错误: 缺少类属性转换

Question

错误：缺少类属性转换

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”之后进行。这些方法我都已经尝试过了。

- speak

Answer 1

您需要安装@babel/plugin-proposal-class-properties：

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

或者

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

并将以下内容添加到您的 Babel 配置文件中-通常是 .babelrc 或 babel.config.js。

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

- neeraj-dixit27

---

使用新的包后，"plugins"部分应该如下所示： plugins: ['@babel/plugin-proposal-class-properties'] - Sebastian

这已经包含在 @babel/preset-env 中，因此无需单独安装。 - vsync

我们需要手动创建 .babelrc 或 babel.config.js 吗？ - John Joe

Answer 2

好的，最终我弄明白了，在我的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[]=es2015,presets[]=react,presets[]=stage-0'

- speak

---

不需要两者都有。如果你有一个.babelrc文件，你可以放弃在你的加载器上设置的所有参数。 - loganfsmyth

你是不是通过调整webpack.config.js文件来解决了问题？我也遇到了同样的问题，但我使用的是browserify，却无法摆脱这个问题。 - lenny.myr

我正在使用Browserify，并且使用这个顺序"es2015"、"react"、"stage-0"对我有用。我将配置放在.babelrc中。 - lipp

嗨 @speak，好发现。但我建议你在这个答案中写下正确的配置，因为我最初使用了你的错误配置 -_- - YuC

@lenny.myr，如果你正在使用browserify，那么你需要安装https://babeljs.io/docs/plugins/preset-stage-0/。然后在你的gulp任务中更新transform为.transform('babelify', {presets: ['es2015', 'react','stage-0']})。 - rex

我正在使用Browserify，并在.bablerc中更新了顺序“es2015”，“react”，“stage-0”。请确保在package.json browersify.transform.presets中具有相同的顺序，或者如果需要其他浏览器转换，则可以完全删除它。 - Vineet Kapoor

Answer 3

如果仍然存在相同的问题，可以参考以下博客： https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

在我的情况下(babel 7.9.6, typescript 3.9.2, webpack 4.43.0)，我需要执行以下操作:

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

- Anatolyevich

---

如果您正在使用@babel/preset-env，则包含了@babel/proposal-class-properties这个包。 - vsync

Answer 4

当我在一个类中使用箭头函数而没有多想时，遇到了这个问题。一旦我将箭头函数更改为常规的函数/方法定义，错误就得到了解决。

- vancy-pants

---

在使用WebComponents和lit-element库时非常有帮助。 - tonkatata

如果您不打算将箭头函数作为类属性包含在内，则考虑使用此修复程序可能是值得的，因为在转换为ES2017之后，它们会有一些明显的缺陷。请参见https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1。 - BenHohner

Answer 5

我曾经遇到过同样的错误，我在我的 .babelrc 文件中正确地排列了插件，但问题仍然存在。删除我在 webpack loader 中定义的预设参数可以解决这个问题。

之前的 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/
    }
  ]
}

- Vanessa Ejikeme

Answer 6

在我的情况下，解决方法是在我的webpack.config.js的选项属性中定义'transform-class-properties'插件，我正在使用Babel V6。

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

- Jamal S

Answer 7

因为我使用了stage-3而不是stage-0，所以出现了这个错误。

- Ben

Answer 8

我也因为使用了 env 预设而遇到了这个错误：

"presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]],

当我移除了 env 预设后，它就正常工作了。

- Creem

Answer 9

@speak 是正确的，但你需要改变顺序

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

- Montage

Answer 10

我在使用koa-react-view时遇到了同样的问题。受这些答案的启发，最终通过以下代码在koa server.js中解决了它：

const register = require('babel-register');

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

- Jeff Tian