Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] preset-ie11: Duplicate plugin/preset detected #190

Open
Erazihel opened this issue Feb 18, 2021 · 0 comments
Open

[Bug] preset-ie11: Duplicate plugin/preset detected #190

Erazihel opened this issue Feb 18, 2021 · 0 comments
Labels
bug Something isn't working

Comments

@Erazihel
Copy link

Erazihel commented Feb 18, 2021

Duplicate plugin/preset detected

I tried adding the @storybook/preset-ie11 addon but Webpack throws an error that says there is a duplicate plugin/preset detected.

Steps to reproduce the behavior

  1. Add @storybook/preset-ie11 in the addons array of the main.js file.
  2. Start Storybook

Expected behavior

The Storybook should start.

Screenshots and/or logs

Here is the error thrown by Webpack:

ERROR in ./.storybook/storybook-init-framework-entry.js
Module build failed (from ./node_modules/@storybook/core/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'],
  ]

Duplicates detected are:
[
  {
    "alias": "/myApp/node_modules/@babel/preset-env/lib/index.js",
    "options": {
      "shippedProposals": true,
      "useBuiltIns": "usage",
      "corejs": "3"
    },
    "dirname": "/myApp",
    "ownPass": false,
    "file": {
      "request": "/myApp/node_modules/@babel/preset-env/lib/index.js",
      "resolved": "/myApp/node_modules/@babel/preset-env/lib/index.js"
    }
  },
  {
    "alias": "/myApp/node_modules/@babel/preset-env/lib/index.js",
    "options": {
      "targets": {
        "ie": "11"
      }
    },
    "dirname": "/myApp",
    "ownPass": false,
    "file": {
      "request": "@babel/preset-env",
      "resolved": "/myApp/node_modules/@babel/preset-env/lib/index.js"
    }
  }
]

Environment

  • OS: [macOS Big Sur]
  • Node.js version: [v14.15.4]
  • NPM version: [6.14.10]

Additional context

Here is the complete main.js file:

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    'storybook-addon-designs',
    '@storybook/preset-ie11',
    {
      name: '@storybook/addon-essentials',
      options: {
        docs: false,
      },
    },
  ],
  webpackFinal: async function (config) {
    config.resolve.alias = {
      ...config.resolve.alias,
      '~/assets': path.resolve(__dirname, '../assets'),
      '~/mocks': path.resolve(__dirname, '../mocks'),
      '~': path.resolve(__dirname, '../src'),
    };

    const fileLoaderRule = config.module.rules.find(function (rule) {
      return rule.test.test('.svg');
    });

    fileLoaderRule.exclude = /\.svg$/;

    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

Note that I tried removing all the addons except @storybook/preset-ie11 and the error was still there.

This is the script I run to start Storybook:

    "storybook": "start-storybook -p 6006 -s ./public",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant