Question

我正在尝试将React与Symfony 4一起使用，但无法实现。当我尝试构建webpack时，我通过.addEntry（）添加到webpack.config.js的每个.js文件都收到以下错误：

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的更改，它们已经过时了。现在我陷入了这个错误。

Answer 1

删除config.presets.push(['@babel/env'], ['@babel/react'])})或<?php $connect = mysqli_connect('localhost', 'dm459', 'dm459', 'dm459_kiamycontacts'); //This is my connection to the database $query = "SELECT * FROM employee WHERE contactID = 3 AND employeeUsername = '" .$_SESSION['User'] . "' LIMIT 1"; //This is the query to the database $result1 = mysqli_query($connect, $query); ?> <select id="dropdown"> <?php $row1 = mysqli_fetch_array($result1); if(!empty($row1)) { ?> <option class="select" value="0">Kia Academy</option> <option class="select" value="1"> Dealer Development</option> <?php } elseif (empty($row1)) { ?> <option class="select" value="0">Kia Academy</option> <option class="select" value="1"> Dealer Development</option> <option class="select" value="2">Dealership</option> <?php } ?> </select>

如果不存在.babelrc文件，这些基本上会做同样的事情。

Answer 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"] }

Answer 3

当我尝试运行react项目时，我遇到了类似的问题。我已经通过修改package.json文件解决了该问题。简单的解决方案：只需从package.json文件中删除“ @ babel / preset-react”：“ ^ 7.0.0”中的“ ^”，然后在npm缓存验证后运行npm install命令。

Answer 4

您的 webpack.config.js 包含 babel / env 。但是npm存储库中没有同名的软件包。有 babel-preset-env 。默认情况下，此Webpack Encore软件包包括-根据Symfony文档“配置Babel” https://symfony.com/doc/current/frontend/encore/babel.html

通过以下命令自动为所有.js和.jsx文件配置Babel 带有合理默认值的babel-loader（例如@ babel / preset-env 和@ babel / preset-react（如果要求）。

因此，请尝试将配置更改为此：

.enableReactPreset()
.configureBabel(function(babelConfig) {

}, {

});

您不需要在Webpack配置中添加'@ babel / react'作为预设因为选项.enableReactPreset（）已经在执行https://github.com/symfony/webpack-encore/blob/v0.27.0/lib/loaders/babel.js#L57-L61

如果需要启用其他预设或插件，请根据Symfony文档“配置Babel”使用此语法

您的package.json也很多余。您可以将其删除：

@ babel / preset-react
@ babel / preset-env
小型装载机多余的这些软件包已作为 @ symfony / webpack-encore

在此处查看https://github.com/symfony/webpack-encore/blob/v0.27.0/package.json

Webencore失败：检测到重复的插件/预设

4 个答案: