question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Duplicate plugin/preset detected

See original GitHub issue

Bug Report

I cannot build my project

Building complains of duplicate plugins - either it’s a bug or I have configured it wrong after following documentation.

To Reproduce

This is my basic setup:

src/Button/index.tsx

import * as React from 'react'

import style from './style.css'

export interface ButtonProps {
  children: React.ReactNode;
}

export const Button = ({ children }: ButtonProps) => (
  <button className={style.Button}>{children}</button>
)

src/Button/README.mdx

---
name: Hello world
---

import Button from './index.tsx'

# Hello world

Hello, I'm a mdx file!

<Button>Click</Button>

doczrc.js

module.exports = {
  typescript: true,
  plugins: [],
  debug: true
}

.babelrc

{
  "presets": [
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ],
    "@babel/preset-react"
  ]
}

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'components',
    libraryTarget: 'umd'
  },
  externals: [
    'react',
    'react-dom'
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.css']
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              modules: true,
            }
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

package.json

{
  "name": "components",
  "version": "0.0.0",
  "main": "dist/index.js",
  "license": "MIT",
  "sideEffects": false,
  "scripts": {
    "build": "tsc --emitDeclarationOnly && webpack --mode production"
  },
  "files": [
    "dist"
  ],
  "peerDependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "@babel/preset-react": "^7.0.0-beta.51",
    "@babel/preset-typescript": "^7.0.0-beta.51",
    "@types/react": "^16.4.1",
    "autoprefixer": "^8.6.3",
    "babel-loader": "^8.0.0-beta.4",
    "css-loader": "^0.28.11",
    "docz": "^0.3.3",
    "postcss-loader": "^2.1.5",
    "postcss-modules": "^1.1.0",
    "postcss-preset-env": "^5.1.0",
    "style-loader": "^0.21.0",
    "typescript": "^2.9.2",
    "webpack": "^4.12.1",
    "webpack-cli": "^3.0.8"
  }
}

output

component-lib · yarn docz build
yarn run v1.7.0
$ /Users/danbaker/Repos/new/component-lib/node_modules/.bin/docz build
▶  start     Creating an optimized production build...
Happy[jsx]: Version: 5.0.0. Threads: 3
Happy[jsx]: All set; signaling webpack to proceed.
Happy[mdx]: Version: 5.0.0. Threads: 3
Happy[mdx]: All set; signaling webpack to proceed.
✖  fatal     Failed to compile.

./.docz/app/index.jsx
Module build failed (from ./node_modules/happypack/loader.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'],
  ]


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Expected behavior

Build

Enviroment

  • OS: MacOS High Sierra
  • Node version: 8.11.1
  • Yarn version: 1.7.0

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:15 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
kserjeycommented, Mar 12, 2019
1reaction
coffeedoughnutscommented, Jun 26, 2018

working on that assumption, I modified my doczrc.js to look like this:

module.exports = {
  typescript: true,
  modifyBabelRc: (babelrc) => {
    babelrc.babelrc = true
    babelrc.presets = []
    babelrc.plugins = ['@babel/plugin-syntax-dynamic-import']
    return babelrc
  }
}

and the output was:

component-lib · yarn docz build
yarn run v1.7.0
$ /Users/danbaker/Repos/new/component-lib/node_modules/.bin/docz build
▶  start     Creating an optimized production build...
✖  fatal     Failed to compile.

./src/Button/index.tsx
Module build failed (from ./node_modules/happypack/loader.js):
SyntaxError: /Users/danbaker/Repos/new/component-lib/src/Button/index.tsx: Unexpected token, expected ";" (11:1)

   9 | export default ({ children }: ButtonProps) => (
  10 |   <button className={style.Button}>{children}</button>
> 11 | )try {
     |  ^
  12 |     // @ts-ignore
  13 |     Button.displayName = "Button";
  14 |     // @ts-ignore


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Read more comments on GitHub >

github_iconTop Results From Across the Web

Babel 7 fails with single plugin saying "Duplicate plugin/preset ...
This is a babel error basically saying that you have defined your plugin @babel/plugin-transform-regenerator twice - more or less indirectly ...
Read more >
Error: Duplicate plugin/preset detected. · Issue #9840 - GitHub
Error : Duplicate plugin/preset detected. If you'd like to use two separate instances of a plugin, they need separate names, e.g.. plugins: [...
Read more >
Babel error Duplicate plugin/preset detected (Trying ... - Reddit
I found some information where it says: most likely cause of the error mentioned is that you have one or more default plugins...
Read more >
Babel 7 fails with single plugin saying "Duplicate plugin/preset ...
This is a babel error basically saying that you have defined your plugin @babel/plugin-transform-regenerator twice - more or less indirectly. Parcel Bundler ...
Read more >
Jest with Cypress coverage for full-stack web applications
babelrc will lead to Duplicate plugin/preset detected. error when running Jest testing. So one quick solution is to add the istanbul plugin to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found