Ich habe eine Karussell - Datei , in der ich mag zu bekommen index.js
und zu bauen block.build.js
, so dass meine its webpack.config.js
:
var config = {
entry: './index.js',
output: {
path: __dirname,
filename: 'block.build.js',
},
devServer: {
contentBase: './Carousel'
},
module : {
rules : [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
}
]
}
};
module.exports = config;
Das, package.json
was ich benutze, ist unten:
{
"name": "carousel",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.1.3",
"lodash": "^4.17.5",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-swipeable": "^4.2.0",
"styled-components": "^3.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
},
"author": "brad traversy",
"license": "ISC"
}
… Aber ich bekomme folgende Fehlermeldung:
ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
Weiß jemand, wie man das löst?
Antworten:
Sie verwenden eine Kombination aus Babel 6 und Babel 7. Es gibt keine Garantie für die Kompatibilität zwischen den Versionen:
"@babel/core": "^7.0.0-beta.40", "babel-cli": "^6.26.0", "babel-loader": "^8.0.0-beta.0", "babel-plugin-lodash": "^3.3.2", "babel-plugin-react-transform": "^3.0.0", "babel-preset-react": "^6.24.1",
sollte sein
"@babel/core": "^7.0.0-beta.40", "@babel/cli": "^7.0.0-beta.40", "babel-loader": "^8.0.0-beta.0", "babel-plugin-lodash": "^3.3.2", "babel-plugin-react-transform": "^3.0.0", "@babel/preset-react": "^7.0.0-beta.40",
und
query: { presets: ['react', 'es2015'], plugins: ['transform-class-properties'] }
wäre
query: { presets: ['@babel/react', '@babel/es2015'], plugins: ['@babel/proposal-class-properties'] }
Ich bin auch verwirrt, weil Sie
@babel/proposal-class-properties
in Ihrem nicht erwähnt habenpackage.json
, aber vorausgesetzt, es ist dort, sollte es auch aktualisiert werden.quelle
babel-loader
8 mit diesen anderen Modulen v7 verwendet werden sollte und die Verwendungnpm install --save-dev babel-loader@^7
gab mir andere FehlerEs ist mir passiert und eine einfache Lösung für mich war zu deinstallieren
babel-loader@8^
und@babel/core
:… Und dann Version 7 Babel-Loader installieren:
npm install --save-dev babel-loader@^7
quelle
npm install --save-dev babel-loader@^7
Auch von
babel-loader
v8 haben sie sich ein wenig verändert:Webpack 4.x | babel-loader 8.x | babel 7.x.
Webpack 4.x | babel-loader 7.x | babel 6.x.
npm install -D babel-loader@7 babel-core babel-preset-env webpack
(Gleiches für
@babel/preset-react
stattbabel-preset-react
).quelle
Ich habe das gleiche Problem in meinem Webpack / React-Projekt - es scheint, dass es ein Problem mit der
.babelrc
Datei gab.Ich habe es wie unten gezeigt aktualisiert und es hat den Trick gemacht:
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "transform-class-properties", "transform-object-rest-spread" ] }
quelle
das hat bei mir funktioniert:
npm uninstall --save babel-loader npm uninstall --save @babel/core npm install --save-dev babel-loader@^7
und in babelrc:
"presets" : ["es2015", "react"]
quelle
Diese Lösung hat bei mir funktioniert:
dann in
.babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
Führen
npm run start
Sie dann aus , Webpack generiert dasdist
Verzeichnis.quelle
Es gibt Upgrades in Babel 7 von Version 6 unter https://babeljs.io/docs/en/v7-migration . Um das aktuelle Problem / den aktuellen Fehler zu lösen
Installieren
dann sollte in .babelrc die Abhängigkeit für Voreinstellungen so aussehen
{ "presets":["@babel/preset-env", "@babel/preset-react"], "plugins": [ "react-hot-loader/babel", "transform-object-rest-spread"] }
quelle
Ich hatte "Stufe 1" in meinen Voreinstellungen in .babelrc, also habe ich das entfernt und der Fehler ist verschwunden
quelle
Ersetzen Sie Ihre .babelrc-Datei gemäß dem folgenden Code, um mein Problem zu beheben
{ "presets": ["module:metro-react-native-babel-preset"] }
quelle
Das liegt an veralteten Babel-Paketen verwendet werden. Das Babel-Projekt hat, genau wie die meisten anderen aktiven Javascript-Projekte, die Verwendung von Scope-Paketen übernommen. Daher beginnen die Paketnamen mit
@babel
Wenn Sie Garn verwenden, gehen Sie wie folgt vor:
Schritt 1: Entfernen Sie die alten Pakete
Schritt 2: Fügen Sie die neuen Pakete hinzu
Wenn Sie npm verwenden, gehen Sie wie folgt vor:
Schritt 1: Entfernen Sie die alten Pakete
Schritt 2: Fügen Sie die neuen Pakete hinzu
Schritt 3: Gemeinsam für npm oder Garn
Denken Sie nach der Installation der neueren Pakete daran, Ihre
.babelrc
Voreinstellungen vonreact
auf zu aktualisieren@babel/preset-react
. Hier ist ein einfaches Beispiel{ "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
quelle