Why does babel swear at using the same plugins?

Question

webpack

I use this config, and babel swears at using the same plugins:

"presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    "@loadable/babel-plugin"
  ],

Error text:

npm WARN [email protected] requires a peer of [email protected]^15.0.0 but none is installed. You must install peer dependencies yourself.
 
audited 17975 packages in 14.846s
found 216 high severity vulnerabilities
run `npm audit fix` to fix them, or `npm audit` for details

[email protected] ssr:prod:main /usr/src/app
NODE_ICU_DATA=node_modules/full-icu BUILD_MODE=MAIN NODE_ENV=production babel-node index.js

/usr/src/app/node_modules/@babel/core/lib/config/config-descriptors.js:205
throw new 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'],`, `  ]`].join("\n"));
       ^

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 (/usr/src/app/node_modules/@babel/core/lib/config/config-descriptors.js:205:13)
at createDescriptors (/usr/src/app/node_modules/@babel/core/lib/config/config-descriptors.js:114:3)
at createPluginDescriptors (/usr/src/app/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
at plugins (/usr/src/app/node_modules/@babel/core/lib/config/config-descriptors.js:40:19)
at mergeChainOpts (/usr/src/app/node_modules/@babel/core/lib/config/config-chain.js:319:26)
at /usr/src/app/node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/usr/src/app/node_modules/@babel/core/lib/config/config-chain.js:120:22)
at loadPrivatePartialConfig (/usr/src/app/node_modules/@babel/core/lib/config/partial.js:85:55)
at loadFullConfig (/usr/src/app/node_modules/@babel/core/lib/config/full.js:43:39)
at loadOptions (/usr/src/app/node_modules/@babel/core/lib/config/index.js:27:36)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] ssr:prod:main: `NODE_ICU_DATA=node_modules/full-icu BUILD_MODE=MAIN NODE_ENV=production babel-node index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] ssr:prod:main script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Answer 1

We look at the list of plugins that preset-env connects and remove duplicates. The preset itself, if necessary, is customizable .
Also read about @babel/plugin-transform-runtime , it should only be used in development mode.