CODEWITHSUNDEEP
reactjsbabeljswebpack-4
tstreets
tstreets

Reputation: 35

Module Build failed using Webpack4, Babel, React

i keep getting the error:

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

this is my babelrc with the changes it is asking for:

{
"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"]
  ]

}

Not really sure where i have the wrong syntax for the file. Also this is my first time configuring webpack4 with babel for a react application. Please let me know if everything looks fine for this to work with react.

Upvotes: 1

Views: 862

Answers (1)

SamVK
SamVK

Reputation: 3395

Like the error says: you have a duplicate. ["@babel/plugin-transform-react-display-name"] is in your "plugins" array twice. Just delete one of them.

With that said: take a look at what's already included in preset-react (a preset is a pre-defined bundle of plugins). All of those plugins are already included (though "plugin-transform-react-jsx-self" is behind an option.)

Upvotes: 3

Related Questions