#reactjs #symfony #babeljs
#reactjs #symfony #babeljs
Вопрос:
Я пытаюсь использовать 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();
package.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. Теперь я застрял на этой ошибке.
Ответ №1:
Удалить .enableReactPreset() или config.presets.push(['@babel/env'], ['@babel/react'])})
В основном они выполняют то же самое, если файл .babelrc отсутствует.
Комментарии:
1. На самом деле, если я удалю .enableReactPreset (), я получу ту же ошибку, но если я удалю. configureBabel () я получил синтаксическую ошибку: неожиданный токен, ожидаемый «{» (11: 11)
Ответ №2:
Прежде всего, ваши конфигурации противоречат друг другу. Если вы хотите использовать Encore и Symfony с React, вы должны посмотреть это руководство.
https://symfonycasts.com/screencast/webpack-encore
Кроме того, если вы предпочитаете продолжить с этим, вам следует выполнить эту команду добавить этот файл.
npm install -D @babel/core @babel/preset-env babel-loader
.babelrc
{
"presets": ["@babel/preset-env"]
}
Комментарии:
1. Нет, я не думаю, что дело в этом. .babelrc не является обязательным, и вы можете настроить на webpack.config.js
Ответ №3:
У меня возникла аналогичная проблема при попытке запустить проект react. Я исправил проблему, изменив файл package.json. Простое решение: просто удалите «^» в «@babel /preset-react»: «^7.0.0» из вашего файла package.json и запустите команду установки npm после проверки кэша npm.
Ответ №4:
Ваш webpack.config.js содержит babel/ env. Но в репозитории npm нет ни одного пакета с таким же именем. Существует babel-preset-env. Этот пакет webpack encore включает в себя по умолчанию — согласно документации Symfony «Настройка Babel»https://symfony.com/doc/current/frontend/encore/babel.html
Babel автоматически настраивается для всех файлов .js и .jsx через babel-loader с разумными значениями по умолчанию (например, с помощью @babel /preset-env и @babel /preset-react по запросу).
Поэтому попробуйте изменить свою конфигурацию на это:
.enableReactPreset()
.configureBabel(function(babelConfig) {
}, {
});
Вам не нужно добавлять ‘@babel / react’ в качестве пресета в конфигурации webpack
потому что option .enableReactPreset() уже делал этоhttps://github.com/symfony/webpack-encore/blob/v0.27.0/lib/loaders/babel.js#L57-L61
Если вам нужно включить дополнительные пресеты или плагины, используйте этот синтаксис в соответствии с документацией Symfony «Настройка Babel»
Также ваш package.json является избыточным. Вы можете удалить из его:
- @babel/preset-реагировать
- @babel/preset-env
- вавилонский загрузчик избыточен, эти пакеты уже включены в качестве зависимостей для @symfony / webpack-encore
Смотрите здесь https://github.com/symfony/webpack-encore/blob/v0.27.0/package.json