Alors que je configurais React dans le projet Django, j'ai rencontré cette erreur

ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: Prise en charge de la syntaxe expérimentale 'classProperties 'n'est pas activé actuellement (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.

Donc, j'ai installé @ babel / plugin-proposal-class-properties et mis ceci dans 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"
  ]
}

Cependant l'erreur existe toujours, quel est le problème ??

Changement

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

À

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

Cela a fonctionné pour moi

Solution pour projet webpack

Je viens de résoudre ce problème en ajoutant @babel/plugin-proposal-class-propertiesau plugin de configuration webpack. La section module de mon webpack.config.jsressemble à ceci

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

Installez d'abord: @ babel / plugin-proposal-class-properties en tant que dev dependencty:

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

Puis éditez votre .babelrc pour qu'il soit exactement comme ceci:

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

Fichier .babelrc situé dans le répertoire racine, où se trouve package.json .

Notez que vous devez redémarrer votre serveur de développement webpack pour que les modifications prennent effet.

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

remplacez votre fichier .babelrc par le code ci-dessus. cela a résolu le problème pour moi.

Dans la racine de mon environnement de travail, le fichier .babelrc n'était pas là. Cependant, l'entrée suivante dans package.json a résolu le problème.

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

Remarque: n'oubliez pas de quitter la console et de la rouvrir avant d'exécuter les commandes npm ou yarn.

Après presque 3 heures de recherche et de temps passé sur la même erreur, j'ai constaté que j'utilisais l'importation de noms pour React:

import { React } from 'react';

ce qui est totalement faux. Simplement en le basculant sur:

import React from 'react';

toutes les erreurs ont disparu. J'espère que ça aidera quelqu'un. C'est mon .babelrc:

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

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

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

• Installez le plugin-proposition-class-properties npm install @babel/plugin-proposal-class-properties --save-dev

• Mettez à jour votre webpack.config.js en ajoutant 'plugins': ['@babel/plugin-proposal-class-properties']}]

Je trouve le problème que mon a .babelrcété ignoré, cependant je crée babel.config.jset ajoute ce qui suit:

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

Et cela fonctionne pour moi sur l'application React Native, je pense que cela aiderait également les applications React.

Je viens de tester sur Laravel Framework 5.7.19 et les étapes suivantes fonctionnent:

Assurez-vous que votre fichier .babelrc se trouve dans le dossier racine de votre application et ajoutez le code suivant:

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

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

Courez npm run watch.

J'utilise explicitement l'analyseur babel. Aucune des solutions ci-dessus n'a fonctionné pour moi. Cela a fonctionné.

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

Selon cela problème de GitHub, si vous utilisez create-react-app, vous devez copier vos configurations .babelrcou et les supprimer.à cause de ces deux lignes de code, vos configurations dans babelrc, .. sont inutiles. et vous êtes dans votre dossier, j'ai résolu mon problème comme ceci: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'],
                .
                .
                .

J'utilise du fil. J'ai dû faire ce qui suit pour surmonter l'erreur.

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

Ajouter

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

en .babelrcœuvres pour moi.

Déplacer l' stateintérieur a constructor functionfonctionné pour moi:

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

Bonne chance...

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

ou

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

Si quelqu'un travaille sur monorepo après react -native-web-monorepo, vous devez le config-overrides.jsdéposer packages/web. tu dois ajouterresolveApp('../../node_modules/react-native-ratings'), dans ce fichier ...

Mon config-override.jsdossier complet est

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
};

J'ai rencontré le même problème en essayant de transpiler du jsx avec babel. Voici la solution qui a fonctionné pour moi. Vous pouvez ajouter le json suivant à votre .babelrc

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

J'ai créé un lien symbolique pour src / components -> ../../components qui a npm startrendu fou et arrêté d'interpréter src / components / *. Js comme jsx, donnant ainsi la même erreur. Toutes les instructions pour le réparer de babel officiel étaient inutiles. Lorsque j'ai recopié le répertoire des composants, tout était de retour à la normale!