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

Вам необходимо установить babel-plugin-transform-class-properties:

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

or

yarn add babel-plugin-transform-class-properties --dev

и добавьте следующее в файл конфигурации Babel — обычно .babelrc или babel.config.js.

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

ОК, наконец-то понял это, в моем 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, переключил stage-0 на после es2015, и он отлично компилируется.

На всякий случай, если кто-то все еще сталкивается с той же проблемой, мне помог следующий пост в блоге: 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"
       ]
   }
   

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

Бывшая конфигурация веб-пакета:

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

Я столкнулся с этой проблемой, когда не задумываясь поместил некоторые функции со стрелками в один из своих классов. Как только я изменил функции стрелок на обычные определения функций/методов, ошибка была устранена.

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

Исправление в моем случае заключалось в определении плагина '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']}
    }
 ]

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

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

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

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

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

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

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

Если вы используете 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