storybookjs / presets

🧩 Presets for Storybook
MIT License
424 stars 104 forks source link

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

Open Erazihel opened 3 years ago

Erazihel commented 3 years ago

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

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",