Ik heb een carrouselbestand waarin ik index.js
wil ophalen en block.build.js
wil bouwen, dus mijn webpack.config.js
is:
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;
Het package.json
dat ik gebruik staat hieronder:
{
"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"
}
… maar ik krijg deze foutmelding:
ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
Weet iemand hoe dit op te lossen?
Antwoord 1, autoriteit 100%
Je gebruikt een combinatie van Babel 6 en Babel 7. Er is geen garantie voor compatibiliteit tussen verschillende versies:
"@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",
zou moeten zijn
"@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",
en
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
zou zijn
query: {
presets: ['@babel/react', '@babel/es2015'],
plugins: ['@babel/proposal-class-properties']
}
Ik ben ook in de war omdat je @babel/proposal-class-properties
niet hebt genoemd in je package.json
, maar ervan uitgaande dat het daarin staat, zou het moeten ook worden bijgewerkt.
Antwoord 2, autoriteit 50%
Het overkwam mij en een eenvoudige oplossing voor mij was om babel-loader@8^
en @babel/core
te verwijderen:
npm uninstall --save babel-loader
npm uninstall --save @babel/core
… en dan versie 7 babel-loader te installeren:
npm install --save-dev babel-loader@^7
Antwoord 3, autoriteit 12%
Ook van babel-loader
v8, ze zijn een beetje veranderd:
webpack 4.x | babel-loader 8.x | babe 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack 4.x | babel-loader 7.x | babe 6.x
npm install -D babel-loader@7 babel-core babel-preset-env webpack
(hetzelfde voor @babel/preset-react
in plaats van babel-preset-react
).
Antwoord 4, autoriteit 12%
Heb hetzelfde probleem in mijn webpack/react-project – het lijkt erop dat er een probleem was met het bestand .babelrc
.
Ik heb het bijgewerkt zoals hieronder te zien is en het werkte:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
Antwoord 5, autoriteit 4%
Er zijn upgrades in babel 7 vanaf versie 6, zie https://babeljs.io/docs /nl/v7-migratie. Om het huidige probleem/de huidige fout op te lossen
Installeren
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env
dan zou in .babelrc de afhankelijkheid voor voorinstellingen eruit moeten zien
{
"presets":["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"react-hot-loader/babel", "transform-object-rest-spread"]
}
Antwoord 6, autoriteit 4%
Dat komt doordat er verouderde babel-pakkettenworden gebruikt. Het babel-project is, net als de meeste andere actieve Javascript-projecten, overgegaan op het gebruik van scope-pakketten. Daarom beginnen de pakketnamen met @babel
Als je garen gebruikt, volg dan de onderstaande:
Stap 1: verwijder de oude pakketten
$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react
stap 2: voeg de nieuwe pakketten toe
$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react
Als je npm gebruikt, volg dan de onderstaande:
stap 1: verwijder de oude pakketten
$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react
stap 2: voeg de nieuwe pakketten toe
$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react
Stap 3: gemeenschappelijk voor zowel npm als garen
Vergeet niet om na het installeren van de nieuwere pakketten uw .babelrc
-voorinstellingen bij te werken van react
naar @babel/preset-react
. Hier is een eenvoudig voorbeeld
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Antwoord 7, autoriteit 3%
dit werkte voor mij:
npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7
en in babelrc:
"presets" : ["es2015", "react"]
Antwoord 8, autoriteit 3%
Deze oplossing werkte voor mij:
npm install babel-loader babel-preset-react
vervolgens in .babelrc
{
"presets": [
"@babel/preset-env", "@babel/preset-react"
]
}
voer vervolgens npm run start
uit, webpack genereert de directory dist
.
Antwoord 9
Ik had “stage-1” in mijn voorinstellingen in .babelrc, dus ik heb dat verwijderd en de fout verdween
Antwoord 10
Vervang je .babelrc-bestand volgens de code, dit lost mijn probleem op
{
"presets": ["module:metro-react-native-babel-preset"]
}