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?
@babel/plugin-proposal-class-properties
undbabel-plugin-transform-class-properties
. Sie werden nach der Installation neu erstellt, ja?npx babel-upgrade --write --install
Antworten:
Veränderung
Zu
Das hat bei mir funktioniert
quelle
.babelrc
inbabel.config.js
und verwendenmodule.export
wie stackoverflow.com/questions/53916434/…, wie auf github github.com/babel/babel/issues/7879#issuecomment-419732313Test suite failed to run; .loose is not a valid Plugin property
Lösung für Webpack-Projekt
Ich löse dieses Problem einfach durch Hinzufügen
@babel/plugin-proposal-class-properties
zum Webpack-Konfigurations-Plugin. Der Modulabschnitt von mirwebpack.config.js
sieht so ausquelle
Installieren Sie zuerst die Eigenschaften : @ babel / plugin-comment-class- dev als dev-Abhängigkeit:
Bearbeiten Sie dann Ihre .babelrc so, dass sie genau so aussieht:
.babelrc- Datei im Stammverzeichnis, in dem sich package.json befindet.
Beachten Sie, dass Sie Ihren Webpack-Entwicklungsserver neu starten sollten, damit Änderungen wirksam werden.
quelle
Ersetzen Sie Ihre .babelrc-Datei durch den obigen Code. es hat das Problem für mich behoben.
quelle
npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties
@babel/plugin-proposal-class-properties
Abhängigkeit fehlte .In meiner Arbeitsumgebung root war die .babelrc-Datei nicht vorhanden. Der folgende Eintrag in package.json löste das Problem jedoch.
Hinweis: Vergessen Sie nicht, die Konsole zu verlassen und erneut zu öffnen, bevor Sie die Befehle npm oder garn ausführen.
quelle
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:
das ist völlig falsch. Einfach durch Umschalten auf:
Alle Fehler sind weg. Ich hoffe das hilft jemandem. Das ist meine .babelrc:
die webpack.config.js
die package.json
quelle
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']}]
quelle
Invalid 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
Ich finde das Problem, dass mein
.babelrc
ignoriert wurde, aber ich erstellebabel.config.js
und füge Folgendes hinzu:Und es funktioniert für mich in der React Native-Anwendung. Ich denke, dies würde auch React-Apps helfen.
quelle
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.babelrc
ignoriert wurdeIch 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:
Ausführen
npm install --save-dev @babel/plugin-proposal-class-properties
.Ausführen
npm run watch
.quelle
Ich benutze den Babel-Parser explizit. Keine der oben genannten Lösungen hat bei mir funktioniert. Das hat funktioniert.
quelle
Laut diesem GitHub-Problem sollten Sie, wenn Sie die App create-react-app verwenden, Ihre
.babelrc
oder Ihrebabel.config.js
Konfigurationen in diese kopierenwebpack.config.js
und diese löschen. Aufgrund dieser zwei Codezeilen istbabelrc: false,configFile: false,
Ihre Konfiguration in babelrc, .. unbrauchbar. und deinwebpack.config.js
ist in deinem./node_madules/react-scripts/config
Ordner Ich habe mein Problem so gelöst:quelle
Das
state
Innere zu bewegenconstructor function
hat für mich funktioniert:Viel Glück...
quelle
Ich benutze Garn. Ich musste Folgendes tun, um den Fehler zu überwinden.
quelle
Hinzufügen
in
.babelrc
Werke für mich.quelle
yarn add --dev @babel/plugin-proposal-class-properties
oder
npm install @babel/plugin-proposal-class-properties --save-dev
.babelrcquelle
Wenn jemand auf monorepo folgenden Arbeiten reagieren-native-web-monorepo als nötig
config-overrides.js
Datei inpackages/web
. Sie müssen hinzufügenresolveApp('../../node_modules/react-native-ratings'),
in dieser Datei ...Meine vollständige
config-override.js
Datei istquelle
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!quelle
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
quelle