web-dev-qa-db-ja.com

エラー：クラスプロパティの変換がありません

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

私はWebを精査し、すべての修正を中心に行っています。babel6にアップグレードし、「stage-0」の順序を「es2015」の後に切り替えます。すべて私がやった。

javascriptwebpackbabeljsecmascript-next
52
speak

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'

.babelrcと同じ方法で処理する必要があり、ステージ0をes2015以降に切り替えて、完全にコンパイルします。

57
speak

babel-plugin-transform-class-propertiesをインストールする必要があります

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

以下を.babelrcファイルに追加します

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

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

3
Ben

これと同じエラーが発生し、.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/
    }
  ]
}
2
Vanessa Ejikeme

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

1
Creem

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

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

最後に発見された、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'
                    ]
                }
            ],
        }
});
0
Muhammad Sulman

私の場合の修正は、'transform-class-properties'プラグインをwebpack.config.jsのoptions属性で定義していました。私はbabel V6を使用しています

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

koa-react-view を使用して同じ問題に遭遇しました。これらの回答に触発され、koa server.jsの次のコードで最終的に修正しました。

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

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