83

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へのアップグレード、「ステージ0」の順序を「es2015」の後になるように切り替えます。私がやったことのすべて。

4

12 に答える 12

64

OK、最終的にこれを理解しました。私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'

と同じように扱う必要があり、.babelrcstage-0 を es2015 以降に切り替えると、完全にコンパイルされます。

于 2016-02-20T00:08:19.700 に答える
6

誰かが実際にまだ同じ問題に直面している場合に備えて、次のブログ投稿が役に立ちました: https://devblogs.microsoft.com/typescript/typescript-and-babel-7/

私の場合 (babel 7.9.6、typescript 3.9.2、webpack 4.43.0)、次のことを行う必要がありました。

  1. 次のコマンドを実行します。

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

  2. 次の内容の.babelrcファイルを作成します(はい、以前はありませんでしたが、問題なく動作しました) 。

    {
    "presets": [
        "@babel/env",
        "@babel/preset-typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}
于 2020-05-14T05:13:36.090 に答える
3

これと同じエラーが発生し、プラグインを .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/
    }
  ]
}
于 2018-10-22T20:00:18.417 に答える
2

stage-3の代わりに使用していたため、このエラーが発生しましたstage-0。

于 2017-12-04T22:32:41.607 に答える
2

環境プリセットを使用しているため、このエラーにも遭遇します。環境プリセット "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], を削除すると、うまく機能します

于 2018-01-30T07:42:36.210 に答える
0

@speak は正しいが、順序を変更する必要がある

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

于 2016-06-20T07:41:44.103 に答える
0

最終的に発見された、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'
                    ]
                }
            ],
        }
});
于 2018-09-19T10:58:38.837 に答える