时间戳

首页 > 解决方案 > 使用 Webpack4、Babel、React 构建模块失败

reactjs - 使用 Webpack4、Babel、React 构建模块失败

问题描述

我不断收到错误：

 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'],
  ]

这是我的 babelrc 及其要求的更改：

{
"presets": [
  ["@babel/env"],
  ["@babel/preset-react"]
],
"plugins": [
    ["@babel/plugin-syntax-jsx"],
    ["@babel/plugin-transform-react-jsx"],
    ["@babel/plugin-transform-react-display-name"],
    ["@babel/plugin-transform-react-jsx-self"],
    ["@babel/plugin-transform-react-display-name"]
  ]

}

不太确定我在哪里有错误的文件语法。这也是我第一次使用 babel 为 react 应用程序配置 webpack4。如果一切看起来都很好，请让我知道它可以与反应一起使用。

标签： reactjsbabeljswebpack-4

解决方案

就像错误所说：你有一个重复。["@babel/plugin-transform-react-display-name"]在您的“插件”数组中两次。只需删除其中一个。

话虽如此：看看预设反应中已经包含的内容（预设是预定义的插件包）。所有这些插件都已经包含在内（尽管“plugin-transform-react-jsx-self”是一个选项。）

推荐阅读