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

Enabling fastRefresh in a CRA project causes an error #13248

Closed
robcaldecott opened this issue Nov 24, 2020 · 2 comments
Closed

Enabling fastRefresh in a CRA project causes an error #13248

robcaldecott opened this issue Nov 24, 2020 · 2 comments
Assignees
Labels
bug cra Prioritize create-react-app compatibility has workaround

Comments

@robcaldecott
Copy link

robcaldecott commented Nov 24, 2020

I have just upgraded to SB 6.1.5 and am trying to enable fast refresh in my CRA 4.0.1 project. My main.js looks like this:

module.exports = {
  addons: [
    "@storybook/preset-create-react-app",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
  stories: ["../src/**/*.stories.js"],
  reactOptions: {
    fastRefresh: true,
    strictMode: true,
  },
};

However, starting Storybook gives the following error:

ERROR in ./.storybook/storybook-init-framework-entry.js
Module build failed (from ./node_modules/react-scripts/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": "/Users/<me>/Projects/digital-workshop/node_modules/react-refresh/babel.js",
    "dirname": "/Users/<me>/Projects/digital-workshop",
    "ownPass": false,
    "file": {
      "request": "/Users/<me>/Projects/digital-workshop/node_modules/react-refresh/babel.js",
      "resolved": "/Users/<me>/Projects/digital-workshop/node_modules/react-refresh/babel.js"
    }
  },
  {
    "alias": "/Users/<me>/Projects/digital-workshop/node_modules/react-refresh/babel.js",
    "dirname": "/Users/<me>/Projects/digital-workshop",
    "ownPass": false,
    "file": {
      "request": "/Users/<me>/Projects/digital-workshop/node_modules/react-refresh/babel.js",
      "resolved": "/Users/<me>/Projects/digital-workshop/node_modules/react-refresh/babel.js"
    }
  }
]

Am I missing something?

@tooppaaa tooppaaa added the bug label Nov 26, 2020
@tooppaaa tooppaaa self-assigned this Nov 26, 2020
@tooppaaa tooppaaa added the cra Prioritize create-react-app compatibility label Nov 26, 2020
@tooppaaa
Copy link
Contributor

CRA enables fast refresh by default so you don't need to enable fast refresh for storybook

@shilman
Copy link
Member

shilman commented Nov 27, 2020

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.8 containing PR #13303 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Nov 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug cra Prioritize create-react-app compatibility has workaround
Projects
None yet
Development

No branches or pull requests

3 participants