Я пытаюсь использовать React с Symfony 4, но не могу этого добиться. Когда я пытаюсь собрать webpack, я получаю следующую ошибку для каждого файла .js, который я добавил в webpack.config.js через .addEntry()
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)
Но я не указал плагин ни .babelrc, ни webpack.config.js. Вот мои файлы
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();
пакет.json
{
"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"
}
}
У меня нет файла .babelrc.
Так что эта ошибка выглядит очень странно для меня, я пытался следовать нескольким руководствам, но они устарели из-за изменений в Babel 7. Теперь я застрял на этой ошибке.





Удалить .enableReactPreset() или config.presets.push(['@babel/env'], ['@babel/react'])})
В основном они делают то же самое, если файл .babelrc отсутствует.
Прежде всего, ваши конфигурации конфликтуют друг с другом. Если вы хотите использовать Encore и Symfony с React, вы должны посмотреть это руководство.
https://symfonycasts.com/screencast/webpack-encore
Кроме того, если вы предпочитаете продолжить это, вы должны запустить эту команду, чтобы добавить этот файл.
npm install -D @babel/core @babel/preset-env babel-loader
.babelrc
{
"presets": ["@babel/preset-env"]
}
Нет, я не думаю, что это главное. .babelrc не является обязательным, и вы можете настроить его в webpack.config.js
У меня была аналогичная проблема, когда я пытался запустить проект реагирования. Я исправил проблему, изменив файл package.json. Простое решение: просто удалите «^» в «@babel/preset-react»: «^7.0.0» из вашего файла package.json и запустите команду установки npm после проверки кэша npm.
Ваш webpack.config.js содержит вавилон/окружение. Но в репозитории npm нет пакета с таким именем. Есть Вавилон-предустановка-окружение. Этот пакет webpack encore включает по умолчанию — согласно документации Symfony «Настройка Babel». https://symfony.com/doc/current/frontend/encore/babel.html
Babel is automatically configured for all .js and .jsx files via the babel-loader with sensible defaults (e.g. with the @babel/preset-env and @babel/preset-react if requested).
Итак, попробуйте изменить свою конфигурацию на это:
.enableReactPreset()
.configureBabel(function(babelConfig) {
}, {
});
Вам не нужно добавлять «@babel/react» в качестве предустановки в конфигурации веб-пакета. потому что опция .enableReactPreset() уже делала это https://github.com/symfony/webpack-encore/blob/v0.27.0/lib/loaders/babel.js#L57-L61
Если вам нужно включить дополнительные пресеты или плагины, используйте этот синтаксис в соответствии с документацией Symfony «Настройка Babel».
Также ваш package.json является избыточным. Вы можете удалить из него:
См. здесь https://github.com/symfony/webpack-encore/blob/v0.27.0/package.json
На самом деле, если я удалю .enableReactPreset(), я получу ту же ошибку, но если я удалю . configureBabel() я получил синтаксическую ошибку: неожиданный токен, ожидаемый "{" (11:11)