Die Unterstützung für die experimentelle Syntax 'classProperties' ist derzeit nicht aktiviert

117

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?

1So
quelle
Sie sollten nicht beide haben / brauchen @babel/plugin-proposal-class-propertiesund babel-plugin-transform-class-properties. Sie werden nach der Installation neu erstellt, ja?
SamVK
Welche Version von Babel verwenden Sie?
SamVK
Teilen Sie Ihr Paket json
Sakhi Mansoor
Ich habe mein Paket json
1Sun
versuchen Sie esnpx babel-upgrade --write --install
FDisk

Antworten:

81

Veränderung

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

Zu

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

Das hat bei mir funktioniert

Ashik Meerankutty
quelle
17
npm i --save-dev @ babel / Plugin-Vorschlag-Klasse-Eigenschaften
Abhay Shiro
1
Das funktioniert bei mir nicht. Ich werfe die Reaktions-App nicht aus
Supriya Kalghatgi
4
Ubuntu 18 - Ich musste umbenennen .babelrcin babel.config.jsund verwenden module.exportwie stackoverflow.com/questions/53916434/…, wie auf github github.com/babel/babel/issues/7879#issuecomment-419732313
Fabrizio Bertoglio
2
Test suite failed to run; .loose is not a valid Plugin property
David Callanan
42

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']}]
            }
        }
    ]
}
Fangming
quelle
2
Dies sollte die richtige Antwort sein, wenn Sie Webpack verwenden, da es nicht gut ist, viele Konfigurationsdateien (wie webpack.config.js, package.json und .babelrc) zu haben - github.com/babel/babel/issues/8655# issuecomment-419795548
Miro J.
42

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.

Raz
quelle
2
Dieser funktioniert für mich, danke. Ich denke, ist die Lösung für Babel 7.0+
Black Hole
1
das hat bei mir funktioniert.
Bhimashankar Sutar
36
{
    "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.

Awn Ali
quelle
Wenn Sie die create-react-app ausgeworfen haben, ändern Sie mit dieser Konfiguration eine Konfiguration in webpack.config.demo und package.json. Dies bedeutet laufennpm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
Francisco Hodge
Das war unkompliziert. So kam es, dass mir die @babel/plugin-proposal-class-propertiesAbhängigkeit fehlte .
Khwilo
11

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.

Sahana
quelle
6

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"
  }
}
Mo Hemati
quelle
Diese Antwort erscheint mir irrelevant. Ein falscher Import ist ein falscher Import, unabhängig von den verwendeten Plugins.
Marco Faustinelli
Vielen Dank für Ihr Feedback @MarcoFaustinelli. Ein falscher Import ist einer der Gründe für diesen Fehler. So einfaches und grundlegendes Problem kann aber jedem passieren. Eine Antwort ist ein Leitfaden für ein Problem.
Mo Hemati
Upvoted nicht, weil es bei mir funktioniert hat, sondern weil es mir geholfen hat, das Problem zu verstehen - diese Fehlermeldung ist nicht sehr spezifisch.
Pro Q
6
  • 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']}]

Imran
quelle
Weitere Informationen zum Hinzufügen der 'Plugins' finden Sie auf dieser Seite
Pro Q
Dies zu tun, gibt mir einen Fehler in der Art vonInvalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.plugins[1] should be one of these: object { apply, … } | function -> Plugin of type object or instanceof Function Details: * configuration.plugins[1] should be an object. -> Plugin instance * configuration.plugins[1] should be an instance of function -> Function acting as plugin
Pro Q
5

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.

Hussam Kurd
quelle
1
module.exports = { "presets": ["module:metro-react-native-babel-preset"], "plugins": ["@babel/plugin-proposal-class-properties"] }war genug für mich. Können Sie Ihre Antwort aktualisieren und wir sollten auch verstehen, warum .babelrcignoriert wurde
Fabrizio Bertoglio
@FabrizioBertoglio Babel 7 lädt .babelrc nicht mehr automatisch. Neu bei Babel in 7 ist das Konzept eines "Root" -Verzeichnisses. Für die projektweite Konfiguration sucht Babel automatisch nach einer "babel.config.js"
Hussam Kurd
5

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.

مهدی عابدی برنامه نویس و مشاور
quelle
4

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',
      ],
    });
Souradeep Nanda
quelle
Wo soll ich diesen Code hinzufügen? und du verwendest reag js?
MoHammaD ReZa DehGhani
1
Dieser Code ist, wenn Sie ein Babel-Plugin entwickeln. Und ja, mein Plugin ist für JSX. github.com/Ghost---Shadow/i18nize-react
Souradeep Nanda
4

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'],
                .
                .
                .
zeia soroush
quelle
4

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

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

Viel Glück...

Akash
quelle
3

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

yarn add @babel/plugin-proposal-class-properties --dev
Sylvester
quelle
3

Hinzufügen

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

in .babelrcWerke für mich.

Chintan Bhut
quelle
2

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

oder

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

EIN Deutscher
quelle
1

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
};
Wasi Sadman
quelle
0

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!

Martin
quelle
0

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