Mientras configuraba React dentro del proyecto Django, encontré este error

ModuleBuildError en la compilación del módulo falló (de ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: Soporte para la sintaxis experimental 'classProperties 'no está habilitado actualmente (17: 9):

  15 | 
  16 | class BodyPartWrapper extends Component {
> 17 |   state = {
     |         ^
  18 | 
  19 |   }
  20 | 

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 
'plugins' section of your Babel config to enable transformation.

Entonces, instalé @ babel / plugin-proposition-class-properties y puse esto en babelrc

package.json

{
  "name": "cebula_react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "react-hot-loader": "^4.3.6",
    "webpack": "^4.17.2",
    "webpack-bundle-tracker": "^0.3.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  }
}

babelrc

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

Sin embargo, el error sigue existiendo, ¿cuál es el problema?

Cambio

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

A

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

Esto funcionó para mi

Solución para proyecto webpack

Simplemente @babel/plugin-proposal-class-propertiesresuelvo este problema agregando el complemento de configuración del paquete web. La sección del módulo de mi se webpack.config.jsve así

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

Primero instale: @ babel / plugin-proposition-class-properties como dependencia dev:

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

Luego edite su .babelrc para que sea exacto así:

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

Archivo .babelrc ubicado en el directorio raíz, donde está package.json .

Tenga en cuenta que debe reiniciar su servidor de desarrollo webpack para que los cambios surtan efecto.

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

reemplace su archivo .babelrc con el código anterior. me solucionó el problema.

En la raíz de mi entorno de trabajo, el archivo .babelrc no estaba allí. Sin embargo, la siguiente entrada en package.json resolvió el problema.

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

Nota: No olvide salir de la consola y volver a abrir antes de ejecutar los comandos npm o yarn.

Después de casi 3 horas de buscar y dedicar tiempo al mismo error, descubrí que estoy usando la importación de nombres para React:

import { React } from 'react';

que está totalmente mal. Simplemente cambiándolo a:

import React from 'react';

todos los errores se han ido. Espero que esto ayude a alguien. Este es mi .babelrc:

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

el 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'
    })
  ]
}

el 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"
  }
}

• Instale las propiedades de clase de propuesta de complemento npm install @babel/plugin-proposal-class-properties --save-dev

• Actualice su webpack.config.js agregando 'plugins': ['@babel/plugin-proposal-class-properties']}]

Encuentro el problema que .babelrcse ignoró, sin embargo, creo babel.config.jsy agrego lo siguiente:

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',
  ],
};

Y me funciona en la aplicación React Native, creo que esto también ayudaría a las aplicaciones React.

Acabo de probar en Laravel Framework 5.7.19 y los siguientes pasos funcionan:

Asegúrese de que su archivo .babelrc esté en la carpeta raíz de su aplicación y agregue el siguiente código:

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

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

Corre npm run watch.

Estoy usando el analizador de babel explícitamente. Ninguna de las soluciones anteriores funcionó para mí. Esto funcionó.

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

De acuerdo con este problema de GitHub, si usa create-react-app, debe copiar sus configuraciones .babelrco y eliminarlas. Debido a estas dos líneas de código, su configuración en babelrc, .. son inútiles. y tu está en tu carpeta, resolví mi problema así:babel.config.jswebpack.config.jsbabelrc: false,configFile: false,webpack.config.js./node_madules/react-scripts/config

{
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },

                  ],
                  '@babel/preset-env', '@babel/preset-react'
                ],
                plugins: ['@babel/plugin-proposal-class-properties'],
                .
                .
                .

Mover el stateinterior constructor functionfuncionó para mí:

...
class MyComponent extends Component {
  constructor(man) {
    super(man)
    this.state = {}
  }
}
...

Buena suerte...

Estoy usando hilo. Tuve que hacer lo siguiente para superar el error.

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

Añadiendo

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

en .babelrcobras para mí.

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

o

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

Si alguien que trabaja en monorepo sigue a react-native-web-monorepo , entonces necesita config-overrides.jsarchivar packages/web. necesitas agregarresolveApp('../../node_modules/react-native-ratings'), ese archivo ...

Mi config-override.jsarchivo completo es

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// our packages that will now be included in the CRA build step
const appIncludes = [
    resolveApp('src'),
    resolveApp('../components/src'),
    resolveApp('../../node_modules/@react-navigation'),
    resolveApp('../../node_modules/react-navigation'),
    resolveApp('../../node_modules/react-native-gesture-handler'),
    resolveApp('../../node_modules/react-native-reanimated'),
    resolveApp('../../node_modules/react-native-screens'),
    resolveApp('../../node_modules/react-native-ratings'),
    resolveApp('../../node_modules/react-navigation-drawer'),
    resolveApp('../../node_modules/react-navigation-stack'),
    resolveApp('../../node_modules/react-navigation-tabs'),
    resolveApp('../../node_modules/react-native-elements'),
    resolveApp('../../node_modules/react-native-vector-icons'),
];

module.exports = function override(config, env) {
    // allow importing from outside of src folder
    config.resolve.plugins = config.resolve.plugins.filter(
        plugin => plugin.constructor.name !== 'ModuleScopePlugin'
    );
    config.module.rules[0].include = appIncludes;
    config.module.rules[1] = null;
    config.module.rules[2].oneOf[1].include = appIncludes;
    config.module.rules[2].oneOf[1].options.plugins = [
        require.resolve('babel-plugin-react-native-web'),
        require.resolve('@babel/plugin-proposal-class-properties'),
    ].concat(config.module.rules[2].oneOf[1].options.plugins);
    config.module.rules = config.module.rules.filter(Boolean);
    config.plugins.push(
        new webpack.DefinePlugin({ __DEV__: env !== 'production' })
    );

    return config
};

Enfrenté el mismo problema al intentar transpilar algunos jsx con babel. A continuación se muestra la solución que funcionó para mí. Puede agregar el siguiente json a su .babelrc

{
  "presets": [
    [
      "@babel/preset-react",
      { "targets": { "browsers": ["last 3 versions", "safari >= 6"] } }
    ]
  ],
  "plugins": [["@babel/plugin-proposal-class-properties"]]
}

Creé un enlace simbólico para src / components -> ../../components que hizo npm startque se volviera loco y dejara de interpretar src / components / *. Js como jsx, dando así el mismo error. Todas las instrucciones para arreglarlo de babel oficial fueron inútiles. Cuando copié el directorio de componentes, ¡todo volvió a la normalidad!