Ошибка Webencore: обнаружен дубликат плагина/пресета

Я пытаюсь использовать 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. Теперь я застрял на этой ошибке.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
1 439
4

Ответы 4

Удалить .enableReactPreset() или config.presets.push(['@babel/env'], ['@babel/react'])})

В основном они делают то же самое, если файл .babelrc отсутствует.

На самом деле, если я удалю .enableReactPreset(), я получу ту же ошибку, но если я удалю . configureBabel() я получил синтаксическую ошибку: неожиданный токен, ожидаемый "{" (11:11)

bahadir arslan 07.03.2019 18:27

Прежде всего, ваши конфигурации конфликтуют друг с другом. Если вы хотите использовать 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

bahadir arslan 16.03.2019 10:48

У меня была аналогичная проблема, когда я пытался запустить проект реагирования. Я исправил проблему, изменив файл 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 является избыточным. Вы можете удалить из него:

  • @babel/предварительно реагировать
  • @babel/preset-env
  • вавилон-погрузчик избыточный Эти пакеты уже включены в качестве зависимости для @symfony/webpack-бис.

См. здесь https://github.com/symfony/webpack-encore/blob/v0.27.0/package.json

Другие вопросы по теме