Ошибка: Отсутствует преобразование свойств класса

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". Все, что я сделал.

Ответ 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, и он отлично компилируется.

Ответ 2

Вам нужно установить babel-plugin-transform-class-properties, то есть

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

и добавьте следующее в ваш файл .babelrc

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

Ответ 3

У меня была эта ошибка, потому что я использовал stage-3 вместо stage-0.

Ответ 4

Я также сталкиваюсь с этой ошибкой из-за использования предустановок env: "presets": [ "react", "es2015", "stage-0", ["env", { "modules": false }]], и после того, как я удалить предустановки env, он работает хорошо

Ответ 5

@speak прав, но вам нужно изменить порядок

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

Ответ 6

Я столкнулся с той же проблемой, используя коа-реакции-зрения. Получите вдохновение от этих ответов и, наконец, koa server.js их с помощью следующего кода в koa server.js:

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

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

Ответ 7

Наконец обнаружен, чтобы удалить эту ошибку в проекте 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'
                    ]
                }
            ],
        }
});

Ответ 8

У меня была та же самая ошибка, и я заказал свои плагины правильно, но это все еще сохранялось. Удаление предустановленных параметров, которые я определил в моем веб-загрузчике, исправило это.

Бывший конфиг веб-пакета:

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

Рабочий конфиг вебпака:

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

Ответ 9

В моем случае исправлением было определение плагина transform-class-properties в атрибуте options моего webpack.config.js, я использую babel V6

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