Durante la configurazione di React all'interno del progetto Django, mi sono imbattuto in questo errore

ModuleBuildError in Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: Support for the sperimentale sintassi 'classProperties 'non è attualmente abilitato (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.

Quindi, ho installato @ babel / plugin-proposta-class-properties e l'ho inserito in 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"
  ]
}

Tuttavia l'errore è ancora presente, qual è il problema ??

Modificare

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

Per

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

Questo ha funzionato per me

Soluzione per progetto webpack

Ho appena risolto questo problema aggiungendo @babel/plugin-proposal-class-propertiesnel plugin di configurazione webpack. La sezione del modulo del mio ha webpack.config.jsquesto aspetto

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

Prima installa: @ babel / plugin-proposta-class-properties come dev dependencty:

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

Quindi modifica il tuo .babelrc in modo che sia esattamente così:

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

File .babelrc situato nella directory principale, dove si trova package.json .

Si noti che è necessario riavviare il server di sviluppo webpack affinché le modifiche abbiano effetto.

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

sostituisci il tuo file .babelrc con il codice sopra. ha risolto il problema per me.

Nella radice del mio ambiente di lavoro, il file .babelrc non era presente. Tuttavia, dopo aver inserito in package.json il problema è stato risolto.

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

Nota: non dimenticare di uscire dalla console e riaprirla prima di eseguire i comandi npm o filato.

Dopo quasi 3 ore di ricerca e di tempo trascorso sullo stesso errore, ho scoperto che sto usando l'importazione del nome per React:

import { React } from 'react';

il che è totalmente sbagliato. Semplicemente passando a:

import React from 'react';

tutti gli errori sono spariti. Spero che questo aiuti qualcuno. Questo è il mio .babelrc:

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

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

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

• Installa le proprietà-classe-proposta-plugin npm install @babel/plugin-proposal-class-properties --save-dev

• Aggiorna il tuo webpack.config.js aggiungendo 'plugins': ['@babel/plugin-proposal-class-properties']}]

Trovo il problema che il mio è .babelrcstato ignorato, tuttavia creo babel.config.jse aggiungo quanto segue:

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

E funziona per me sull'applicazione React Native, penso che questo aiuterebbe anche le app React.

Ho appena testato su Laravel Framework 5.7.19 e i seguenti passaggi funzionano:

Assicurati che il tuo file .babelrc sia nella cartella principale della tua applicazione e aggiungi il codice seguente:

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

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

Corri npm run watch.

Sto usando esplicitamente il parser di babel. Nessuna delle soluzioni di cui sopra ha funzionato per me. Questo ha funzionato.

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

Secondo questo problema di GitHub, se usi create-react-app dovresti copiare le tue configurazioni .babelrco babel.config.jsin webpack.config.jsed eliminarle. A causa di queste due righe di codice, la babelrc: false,configFile: false,tua configurazione in babelrc, .. sono inutili. e il tuo webpack.config.jsè nella tua ./node_madules/react-scripts/configcartella ho risolto il mio problema in questo modo:

{
              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'],
                .
                .
                .

Spostare l' stateinterno ha constructor functionlavorato per me:

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

In bocca al lupo...

Sto usando il filo. Ho dovuto fare quanto segue per superare l'errore.

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

Aggiunta

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

in .babelrcopere per me.

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

o

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

Se qualcuno sta lavorando su monorepo seguendo react-native-web-monorepo di quanto tu abbia bisogno di config-overrides.jsfile in packages/web. devi aggiungere resolveApp('../../node_modules/react-native-ratings'),in quel file ...

Il mio config-override.jsfile completo è

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

Ho affrontato lo stesso problema mentre cercavo di trasferire alcuni jsx con babel. Di seguito è la soluzione che ha funzionato per me. Puoi aggiungere il seguente json al tuo .babelrc

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

Ho creato un collegamento simbolico per src / components -> ../../components che ha fatto npm startimpazzire e ha smesso di interpretare src / components / *. Js come jsx, dando così lo stesso errore. Tutte le istruzioni per risolverlo da Babel ufficiale erano inutili. Quando ho copiato la directory dei componenti, tutto era TORNATO ALLA NORMALE!