Während ich React innerhalb des Django-Projekts einrichtete, stieß ich auf diesen Fehler

ModuleBuildError beim Erstellen des Moduls fehlgeschlagen (von ./node_modules/babel-loader/lib/index.js): SyntaxError: C: \ Users \ 1Sun \ Cebula3 \ cebula_react \ assets \ js \ index.js: Unterstützung für die experimentelle Syntax 'classProperties' 'ist derzeit nicht aktiviert (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.

Also habe ich @ babel / plugin-comment-class-properties installiert und dies in babelrc eingefügt

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

Der Fehler besteht jedoch weiterhin. Was ist das Problem?

Veränderung

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

Zu

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

Das hat bei mir funktioniert

Lösung für Webpack-Projekt

Ich löse dieses Problem einfach durch Hinzufügen @babel/plugin-proposal-class-propertieszum Webpack-Konfigurations-Plugin. Der Modulabschnitt von mir webpack.config.jssieht so aus

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

Installieren Sie zuerst die Eigenschaften : @ babel / plugin-comment-class- dev als dev-Abhängigkeit:

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

Bearbeiten Sie dann Ihre .babelrc so, dass sie genau so aussieht:

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

.babelrc- Datei im Stammverzeichnis, in dem sich package.json befindet.

Beachten Sie, dass Sie Ihren Webpack-Entwicklungsserver neu starten sollten, damit Änderungen wirksam werden.

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

Ersetzen Sie Ihre .babelrc-Datei durch den obigen Code. es hat das Problem für mich behoben.

In meiner Arbeitsumgebung root war die .babelrc-Datei nicht vorhanden. Der folgende Eintrag in package.json löste das Problem jedoch.

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

Hinweis: Vergessen Sie nicht, die Konsole zu verlassen und erneut zu öffnen, bevor Sie die Befehle npm oder garn ausführen.

Nachdem ich fast 3 Stunden lang nach demselben Fehler gesucht und Zeit damit verbracht hatte, stellte ich fest, dass ich den Namensimport für React verwende:

import { React } from 'react';

das ist völlig falsch. Einfach durch Umschalten auf:

import React from 'react';

Alle Fehler sind weg. Ich hoffe das hilft jemandem. Das ist meine .babelrc:

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

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

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

• Installieren Sie die Plugin-Proposal-Class-Eigenschaften npm install @babel/plugin-proposal-class-properties --save-dev

• Aktualisieren Sie Ihre webpack.config.js durch Hinzufügen 'plugins': ['@babel/plugin-proposal-class-properties']}]

Ich finde das Problem, dass mein .babelrcignoriert wurde, aber ich erstelle babel.config.jsund füge Folgendes hinzu:

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

Und es funktioniert für mich in der React Native-Anwendung. Ich denke, dies würde auch React-Apps helfen.

Ich habe gerade auf Laravel Framework 5.7.19 getestet und die folgenden Schritte funktionieren:

Stellen Sie sicher, dass sich Ihre .babelrc-Datei im Stammordner Ihrer Anwendung befindet, und fügen Sie den folgenden Code hinzu:

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

Ausführen npm install --save-dev @babel/plugin-proposal-class-properties.

Ausführen npm run watch.

Ich benutze den Babel-Parser explizit. Keine der oben genannten Lösungen hat bei mir funktioniert. Das hat funktioniert.

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

Laut diesem GitHub-Problem sollten Sie, wenn Sie die App create-react-app verwenden, Ihre .babelrcoder Ihre babel.config.jsKonfigurationen in diese kopieren webpack.config.jsund diese löschen. Aufgrund dieser zwei Codezeilen ist babelrc: false,configFile: false,Ihre Konfiguration in babelrc, .. unbrauchbar. und dein webpack.config.jsist in deinem ./node_madules/react-scripts/configOrdner Ich habe mein Problem so gelöst:

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

Das stateInnere zu bewegen constructor functionhat für mich funktioniert:

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

Viel Glück...

Ich benutze Garn. Ich musste Folgendes tun, um den Fehler zu überwinden.

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

Hinzufügen

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

in .babelrcWerke für mich.

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

oder

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

Wenn jemand auf monorepo folgenden Arbeiten reagieren-native-web-monorepo als nötig config-overrides.jsDatei in packages/web. Sie müssen hinzufügenresolveApp('../../node_modules/react-native-ratings'), in dieser Datei ...

Meine vollständige config-override.jsDatei ist

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

Ich habe einen Symlink für src / components -> ../../components erstellt, der dazu führte npm start, dass verrückt wurde und src / components / *. Js nicht mehr als jsx interpretiert wurde, wodurch derselbe Fehler ausgegeben wurde. Alle Anweisungen, um es von offiziellen babel zu reparieren, waren nutzlos. Als ich das Komponentenverzeichnis zurückkopierte, war alles wieder normal!

Ich hatte das gleiche Problem, als ich versuchte, etwas jsx mit babel zu transpilieren. Unten ist die Lösung, die für mich funktioniert hat. Sie können Ihrem .babelrc den folgenden json hinzufügen

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