J'essaye d'utiliser React avec Symfony 4 mais je n'ai pas réussi. Quand j'essaye de construire webpack, j'ai l'erreur suivante pour chaque fichier .js que j'ai ajouté à webpack.config.js via .addEntry ()
{
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"@symfony/webpack-encore": "^0.23.0",
"bootstrap": "^4.3.1",
"bootstrap-sass": "^3.4.1",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"popper.js": "^1.14.7",
"sass-loader": "^7.1.0",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"@babel/preset-env": "^7.3.4",
"babel-loader": "^8.0.5",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-dom": "^16.8.4"
}
}
Mais je n'ai spécifié aucun plugin non plus .babelrc ou webpack.config.js. Voici mes fichiers
webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/main.js')
.addStyleEntry('global', './assets/css/global.scss')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSassLoader()
.autoProvidejQuery()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableReactPreset()
.configureBabel((config) => {
config.presets.push(
['@babel/env'],
['@babel/react'],
)})
.addEntry('react', './assets/js/reactGeoSuggest.js')
;
module.exports = Encore.getWebpackConfig();
package.json p>
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
at assertNoDuplicates (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-descriptors.js:205:13)
at createDescriptors (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-descriptors.js:114:3)
at createPresetDescriptors (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at passPerPreset (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-descriptors.js:58:96)
at cachedFunction (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/caching.js:33:19)
at presets.presets (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-descriptors.js:29:84)
at mergeChainOpts (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/config-chain.js:68:29)
at loadPrivatePartialConfig (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/partial.js:85:55)
at Object.loadPartialConfig (/var/www/admin.whenandwhere.events/node_modules/@babel/core/lib/config/partial.js:110:18)
at Object.<anonymous> (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:140:26)
at Generator.next (<anonymous>)
at asyncGeneratorStep (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:3:103)
at _next (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:5:194)
at /var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:5:364
at new Promise (<anonymous>)
at Object.<anonymous> (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:5:97)
at Object._loader (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:220:18)
at Object.loader (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:56:18)
at Object.<anonymous> (/var/www/admin.whenandwhere.events/node_modules/babel-loader/lib/index.js:51:12)
Je n'ai pas de fichier .babelrc .
Il me semble donc très étrange de recevoir cette erreur, j'ai essayé pour suivre quelques tutoriels mais ils étaient obsolètes en raison des changements de babel 7. Je suis maintenant bloqué par cette erreur.
4 Réponses :
Supprimez .enableReactPreset () ou config.presets.push (['@ babel / env'], ['@ babel / react'])}) < / p>
Ils font essentiellement la même chose, si aucun fichier .babelrc n'est présent.
En fait, si je supprime .enableReactPreset (), j'ai la même erreur, mais si je supprime. configureBabel () J'ai eu une erreur de syntaxe: jeton inattendu, attendu "{" (11:11)
Tout d'abord, votre configuration est en conflit. Tant que vous souhaitez utiliser Encore et Symfony avec React, vous êtes censé regarder ce tutoriel.
https://symfonycasts.com/screencast/webpack-encore
De plus, si vous préférez continuer avec cela, vous devez exécuter cette commande pour ajouter ce fichier.
npm install -D @ babel / core @ babel / preset-env babel-loader
.babelrc
{
"presets": ["@ babel / preset-env"]
}
Non, je ne pense pas que ce soit le point. .babelrc n'est pas obligatoire et vous pouvez le configurer sur webpack.config.js
J'ai eu un problème similaire lorsque j'essaye d'exécuter un projet de réaction. J'ai résolu le problème en modifiant le fichier package.json. Solution simple: supprimez simplement le "^" dans "@ babel / preset-react": "^ 7.0.0", de votre fichier package.json, et exécutez la commande npm install après la vérification du cache npm.
Votre webpack.config.js contient babel / env . Mais il n'y a aucun package avec le même nom dans le référentiel npm. Il y a babel-preset-env . Ce package webpack encore inclut par défaut - selon la documentation Symfony "Configurer Babel" https://symfony.com/doc/current/frontend/encore/babel. html
Babel est automatiquement configuré pour tous les fichiers .js et .jsx via le babel-loader avec des valeurs par défaut sensibles (par exemple avec @ babel / preset-env et @ babel / preset-react si demandé).
Alors essayez de changer votre configuration comme suit:
.enableReactPreset()
.configureBabel(function(babelConfig) {
}, {
});
Vous n'avez pas besoin d'ajouter '@ babel / react' comme préréglage dans la configuration du webpack car l'option .enableReactPreset () a déjà fait cela https://github.com/symfony/webpack-encore/blob/v0.27.0/lib/loaders/babel.js#L57-L61
Si vous avez besoin activer des préréglages ou des plugins supplémentaires utiliser cette syntaxe selon la documentation Symfony "Configurer Babel"
De plus, votre package.json est redondant. Vous pouvez supprimer de son:
Voir ici https: // github .com / symfony / webpack-encore / blob / v0.27.0 / package.json