Docz: Duplicate plugin/preset detected

[coffeedoughnuts]

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

[marceloavf]

Hi @coffeedoughnuts, thanks for the feedback!
Please, try to remove the following line from your doczrc.js

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

[coffeedoughnuts]

Hey @marceloavf

That was leftover from my debugging attempts - removing it provides the same error in output

[pedronauck]

@coffeedoughnuts You're using the same default plugins that docz uses internal... some workaround that you can do is that:

// doczrc.js
export default {
  modifyBabelRc: (babelrc) => {
    babel.babelrc = true
    babel.presets = []

    return babelrc
  }
}

[coffeedoughnuts]

Thanks for the help @pedronauck

That seems to unblock my issue, though creates a new one:

doczrc.js

module.exports = {
  typescript: true,
  modifyBabelRc: (babelrc) => {
    babelrc.babelrc = true
    babelrc.presets = []
    return babelrc
  }
}

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...
✖  fatal     Failed to compile.

./.docz/app/imports.js
Module build failed (from ./node_modules/happypack/loader.js):
SyntaxError: /Users/danbaker/Repos/new/component-lib/.docz/app/imports.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (3:5):

  1 | export const imports = {
  2 |   'src/Button/README.mdx': () =>
> 3 |     import(/* webpackPrefetch: true, webpackChunkName: "src-button-readme" */ 'src/Button/README.mdx'),
    |     ^
  4 | }
  5 |

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.


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

am I right in assuming that this needs me to install @babel/plugin-syntax-dynamic-import as a dev dependency and then add it into a 'plugins' array in that function above?

[coffeedoughnuts]

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.

[jhonmike]

@coffeedoughnuts I was having the same problem as you, but this last attempt suited me... thanks

doczrc.js

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

[pedronauck]

Fixed on previous release v0.9.2

[vdsabev]

I'm using [email protected] and had a similar issue, with @babel/plugin-proposal-object-rest-spread missing. The following code (adapted from other examples found here) resolved the issue:

export default {
  modifyBabelRc: (babelrc) => ({
    ...babelrc,
    babelrc: true,
  }),
};

[kserjey]

Recently I have installed [email protected] and run into this problem. Here is the solution:

module.exports = {
  modifyBabelRc: babelrc => Object.assign({}, babelrc, { plugins: [] }),
}

[timbergus]

Hi all,

I have started a new and mostly empty project, with a pretty simple .babelrc file:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

After the first error (Duplicate plugin/preset detected), I have tried @kserjey solution with a little modification in the doczrc.js file, adding @babel/plugin-syntax-dynamic-import because of another error about the import() function.

export default {
  modifyBabelRc: (babelrc) => {
    return Object.assign({}, babelrc, { plugins: [
      '@babel/plugin-syntax-dynamic-import'
    ]
  });
};

And finally, I have a new error:

Don't know what to do next. Any clue?

I'm working with "@babel/core": "7.3.4", by the way.

Thanks in advance.

[timbergus]

Even more, I have tried the __Getting Started__ over an empty project with just the package.json inside, and I have the same error from yesterday:

npm init -y

npm i -D docz docz-theme-default

npm run docz:dev

[kserjey]

@timbergus see #596

[timbergus]

Thanks a lot, @kserjey. I have tried with Yarn instead of NPM and it works. Apologies for the inconveniences.

[akharkhonov]

Same error even with yarn.
doczrc.js

module.exports = {
  modifyBabelRc: babelrc => Object.assign({}, babelrc, { plugins: [] }),
  typescript: true,
  menu: ['Home', 'Components']
};

package.json
error:

[yyynnn]

Installing from yarn is not a solid solution