Ответ 1

+ Изменить

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

к

"plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]

Это сработало для меня

Ответ 2

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties"
        ]
    ]
}

замените файл.babelrc на код выше. это исправило проблему для меня.

Ответ 3

Решение для проекта webpack

Я просто решу эту проблему, добавляя @babel/plugin-proposal-class-properties offer @babel/plugin-proposal-class-properties в плагин конфигурации webpack. Раздел модуля моего webpack.config.js выглядит следующим образом:

module: {
    rules: [
        {
            test: path.join(__dirname, '.'),
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env',
                          '@babel/react',{
                          'plugins': ['@babel/plugin-proposal-class-properties']}]
            }
        }
    ]
}

Ответ 4

• Установите свойства плагина-предложения-класса npm install @babel/plugin-proposal-class-properties --save-dev

• Обновите свой webpack.config.js, добавив 'plugins': ['@babel/plugin-proposal-class-properties']}]

Ответ 5

После почти трех часов поиска и траты времени на ту же ошибку, я обнаружил, что я использую импорт имени для React:

import { React } from 'react';

что совершенно неверно. Просто переключив его на:

import React from 'react';

вся ошибка исчезла. Я надеюсь, что это помогает кому-то. Это мой.babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
      "@babel/plugin-proposal-class-properties"
  ]
}

webpack.config.js

const path = require('path');
const devMode = process.env.Node_ENV !== 'production';
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: './src/App.js',
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'App.js'
  },
  mode: 'development',
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    port:9090,
    open: 'google chrome',
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },{
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[local]--[hash:base64:5]',
              sourceMap: true
            }
          },{
            loader: 'sass-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ]
}

package.json

{
  "name": "expense-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.0",
    "mini-css-extract-plugin": "^0.4.3",
    "node-sass": "^4.9.3",
    "react-router-dom": "^4.3.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "normalize.css": "^8.0.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

Ответ 6

Я нахожу проблему с тем, что мой .babelrc был проигнорирован, однако я создаю babel.config.js и добавляю следующее:

module.exports = {
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-transform-regenerator',
    [
      '@babel/plugin-transform-runtime',
      {
        helpers: false,
        regenerator: true,
      },
    ],
  ],
  presets: [
    "@babel/preset-flow",
    'module:metro-react-native-babel-preset',
  ],
};

И это работает для меня в приложении React Native, я думаю, что это также поможет приложениям React.

Ответ 7

Сначала установите: @babel/plugin-offer-class-properties как dev devdendeny:

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

Затем отредактируйте ваш .babelrc так, чтобы он был точно таким:

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

Файл .babelrc находится в корневом каталоге, где находится package.json.

Обратите внимание, что вам следует перезапустить свой сервер разработки веб-пакетов, чтобы изменения вступили в силу.

Ответ 8

Я использую пряжу. Мне пришлось сделать следующее, чтобы преодолеть ошибку.

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

Ответ 9

Даже если я сталкиваюсь с той же проблемой, пожалуйста, помогите мне через это, поскольку я новичок, чтобы реагировать JS. можете найти мой экспериментальный код по ссылке ниже: https://codesandbox.io/s/n7n7k087rl

Из приведенных выше обсуждений кажется, что у меня есть проблема с моим файлом package.json.

Ответ 10

Я использую анализатор babel явно. Ни одно из вышеперечисленных решений не помогло мне. Это сработало.

const ast = parser.parse(inputCode, {
      sourceType: 'module',
      plugins: [
        'jsx',
        'classProperties', // '@babel/plugin-proposal-class-properties',
      ],
    });