Storybook: CRA & Storybook webpack clash

@mrmckeb Is this related to https://github.com/storybooks/storybook/pull/5308?

@shilman, it may require a similar fix.

@firaskrichi, can you please run npm ls webpack and paste the results?

Hello, I am having the same issue here, I am giving you the result of npm ls webpack

├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected]  deduped
│ └── [email protected]
└─┬ [email protected]
  └── [email protected]

@shilman is there an easy workaround we could do until this is fixed maybe? A version that's likely to work?

I'm not sure, @mrmckeb is the expert here! Happy to prioritize a release this to get it fixed for CRA users!

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

I have the same issue :(

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.29.6"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

▶ npm ls webpack 
[email protected] /Users/foo/projects/bar
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected]  deduped
│ └── [email protected] 
└─┬ [email protected]
  └── [email protected] 

Require assistance please...have no idea how to fix this

@mrmckeb what do you advise doing here?

I'm also having this problem and I'd really appreciate some help.

▶ npm ls webpack 
...
├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ └── [email protected]  deduped
│ └── [email protected] 
└─┬ [email protected]
  └── [email protected] 

In the meantime I have added this to my package.json and run yarn install. I'm not sure if this is a good fix, but it seems to work.

  "resolutions": {
    "webpack": "4.29.6"
  },

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

So far I have found only one solution: add SKIP_PREFLIGHT_CHECK=true to .env, but that is more of a band-aid rather than an actual solution. Unfortunately, using yarn is not an option, since the company does not want to switch to it.

Anybody has any ideas on how to deal with this?

Actually, found a solution: all I had to do was move the react-scripts dependency from devDependencies to reg dependencies.

Hi all, you need to have react-scripts in dependencies, not devDependencies. This is how it installs by default.

If you're seeing versioning issues, try removing your node_modules and lock file, and reinstalling. This should resolve most issues.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

I'm still seeing this issue with react-scripts 3.1.1 and storybook 5.1.11 when I add Storybook to an existing project. I'm not using devDependencies, so that's not the issue, and using the resolutions property in package.json doesn't work.

The one solution that does work is to use yarn instead of npm to install dependencies, presumably due to its superior dependency resolution abilities. If I create a new CRA project, however, and add Storybook there's no conflict when installing with npm (or yarn).

The output of npm ls webpack in my existing project:

├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]  deduped
│ │ └── [email protected]  deduped
│ └── [email protected]
└─┬ [email protected]
  └── [email protected]

The output of npm ls webpack in my new test project:

├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]  deduped
│ │ └── [email protected]  deduped
│ └── [email protected]
└─┬ [email protected]
  └── [email protected]  deduped

As you can see, I'm using the exact same versions of react-scripts and storybook in both projects, yet in my existing project storybook is using [email protected], whereas it's using [email protected] in the new test project.

Same issue here... :(

Just tried to add current storybook/[email protected] to my existing CRA-app ([email protected]). Both are _dependencies_, not _devDependencies_.

Using yarn instead of npm is not possible, so I don't know what to do... (except of unwillingly adding the SKIP_PREFLIGHT_CHECK flag 😒)

Shouldn't be there a mass of people encountering the same problem? Trying to add the current storybook/react version to a CRA-app seems quite common for me

@mrmckeb could we possibly take a look together, I could use some more information about how CRA does thinks and how we could improve the situation so this happens less often.. 🙇

Hi @ndelangen, 100% - but to be honest, this is mostly on the CRA side and I think the issue needs to be resolved there. CRA has very strict version checking, and whilst I understand why the team want that, it means that other tools using the same packages can cause conflicts.

• One solution would be for Storybook to always use CRA's version, and never install such dependencies, but that would require a big change to the way Storybook installs. I don't think that is the right solution either.
• Another possible solution is to have a compatibility table, but this is also something that would - IMO - be a bad fix.

@IvanKovnovic, if you're having the issue, I would suggest that you could a) try to delete your lockfile and node_modules and reinstall, or b) use Yarn resolutions to force the project versions of things like Webpack.

Of course, the only other option is to use the SKIP_PREFLIGHT_CHECK. This is not a Storybook problem as such, nor a CRA _problem_... it's CRA warning you that the wrong version of a dependency may be picked up during build, and that it may cause you problems. Really, it's a module resolution issue.

It feels as if there's nothing we can do about this then.

Hi @mrmckeb , thanks for your detailed answer.

a) doesn't help, if the current dependency versions don't match, like it was the case last week.
(Last week the latest @storybook/[email protected] resolved webpack to 4.40.2, the latest [email protected] resolved it to 4.39.1 -> Issue. In the meanwhile, on Sunday a newly released [email protected] dumped webpack to 4.40.2 -> No issue anymore. So in general its kind of 'luck' regarding the time of trying.

b) is not possible because in my corporate environment the usage of NPM is mandatory

So at the moment I either use the SKIP_PREFLIGHT_CHECK or just try to update the packages delayed, after having a look at their current webpack resolutions...

Anyway, I totally understand your arguments and agree on closing this issue because there's nothing that can be done here.
But what about mentioning this problem on the storybook's doc page? I think I'm by far not the only one, because adding a current storybook/react version to a up-to-date CRA-app seems quite common and potentially confusing, especially for beginners.

@IvanKovnovic Yes, a section explaining this problem on the docs size would be welcome!

Would you be able to make a PR for that? Let me know if you need any help. 🙇

Agreed @ndelangen, it would be great to get a PR up.

@IvanKovnovic we are trying to address some of this with the new Storybook preset for CRA... but that's a work in progress.

Sure, I will attend to it within the next few days

Same problem here.

@mrmckeb Is there any provision for this in the preset at this point?

The new preset (with 5.3.0-alpha) should work better than before, but frankly this is a hard problem to solve without CRA unpinning dependencies.

I'd suggest those affected use Yarn's resolutions feature to control dependencies.

@shilman, let's take a look at this together during the next few days and see if there's anything else we can come up with.

What about setting webpack as a peer dependency?

That would impact thousands of users of storybook that are not CRA users.
And CRA users don't have a dependency to webpack in their package.json, so they'd get a warning when installing

That would impact thousands of users of storybook that are not CRA users.

Maybe, but this could potentially impact 1.4 million CRA users.

And CRA users don't have a dependency to webpack in their package.json, so they'd get a warning when installing

Are you sure this is how peer dependencies work? I am almost certain that webpack as a peer dependency would resolve to the webpack under CRA.

@marcandrews, this is a tricky situation. Storybook definitely needs Webpack, but CRA has a traditionally had pinned versions of everything which is what causes the issue.

I'm on both teams, and I believe this is an issue on the CRA side more than Storybook. However, I've worked with @ndelangen and @shilman on this for a while now, and we've been trying to find the right solution.

The peer dependency fix would break usage for other users, as they would then need to install Webpack themselves (they may be using a competing build system).

Out of interest, what is the version difference you're seeing @marcandrews?

Yes, I agree; this is a challenging problem, especially when the team has done an amazing job reducing the amount of setup/overhead required to get Storybook up and running.

I am currently using [email protected] and it has [email protected] as a dependency. @storybook/[email protected] depends on webpack@^4.33.0, so the latest [email protected] gets installed, resulting in a conflict.

What if webpack, and other, build-like dependencies, were moved to the individual platform packages? For quick starts, the @storybook/cli can install webpack, while for slow starts (individual platforms), the user can be instructed to install webpack. For example, the docs @storybook/react already ask you to install react, react-dom, @babel/core, and babel-loader; webpack can be added to list. This also opens up the possibility to bring my own build system (parcel, rollup, TypeScript, etc.).

I'm just hypothesizing here.

@marcandrews, I think that's a great idea. My only concern is that Storybook itself may then have potential issues - as it would rely on versions set by the user.

But this may be the only sensible path forward. We're also trying to loosen ranges on the CRA side.

There are a few teams I never question with respect to SemVer and webpack is one of them 😀

... but yes, when setting webpack as a peer dependency, a minimum major version should be specified. npm should be smart enough to install the version of webpack specified by CRA as it should satisfy the peer dependency.

@mrmckeb @ndelangen @marcandrews Do we have a path forward here?

I'm not sure what the right path is @shilman, it would be risky for Storybook to rely on CRA's version of Webpack, but on the CRA side we're loosening dependencies.

Should this be closed? It's still unresolved and an issue that I just searched for. I would suggest a title change as i'm on cra 3.3.0.

I've still got issues with my system as well. No resolve since April of last year just suggestions? And none of those suggestions seem to be working..

@mrmckeb did CRA end up allowing for more loose versions of its dependencies?

Can we tell users that upgrading to the latest CRA + Storybook resolves the issue?

@ndelangen - I'm currently experiencing this issue with an old repo running "react-scripts": "^3.3.0", and "@storybook/react": "^5.2.6",.

Storybook is loading 4.41.5
react-scripts is loading 4.41.2

But they conflict.

I'm being told the workaround is to manually npm i [email protected] as Storybook works fine with it.

However I'm reluctant and I'm wondering if you know what version of Storybook is bound to [email protected] ?

I will try a fresh CRA + Storybook this evening and let you know if the outcome but in the meantime it would be great to get your feedback on adding webpack as a root dependancy?

Thanks

@nmiddleweek storybook will work with either 4.41.5 or 4.41.2 no problem. So will CRA.

We do not release a new version of storybook for every patch version of webpack, so there's no version of storybook that exactly depends on webpack 4.41.2.

My assumption is that if you indeed install the exact version CRA wants, storybook will start using that, nor problem.

Sorry @ndelangen, this is happening gradually.

Users of Yarn can use resolutions to lock the version of Webpack to a specific version (across both Storybook and CRA), and there is a package for npm which can emulate that (https://www.npmjs.com/package/npm-force-resolutions).

You can also, as Norbert mentioned, install the dependency to your project directly - at the version CRA is requesting.

I was getting this same issue, my yarn was out of date.
Running sudo apt-get update was failing to update yarn.
Turns out I was using an old GPG key, to get the updated key I ran:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
sudo apt-get update

And it fixed my yarn.

Credit:
https://github.com/yarnpkg/yarn/issues/7866

Create a .env file in the root directory of the project and add this line SKIP_PREFLIGHT_CHECK=true inside the file.

then try to run yarn start.

Sorry @ndelangen, this is happening gradually.

Users of Yarn can use resolutions to lock the version of Webpack to a specific version (across both Storybook and CRA), and there is a package for npm which can emulate that (https://www.npmjs.com/package/npm-force-resolutions).

You can also, as Norbert mentioned, install the dependency to your project directly - at the version CRA is requesting.

Yarn resolutions documentation

Is this still happening?

I am on [email protected], @storybook/react@^5.3.14 with @storybook/preset-create-react-app@^1.5.2 and I can compile without warnings.

By the way, I think this _preset option_ is an excellent solution; it's definitely better than modifying the _slow-start_ instructions. After upgrading from 5.2, I was back up and running in about 10 minutes ❤️

Thanks for the feedback @marcandrews!

SKIP_PREFLIGHT_CHECK=true

Create a .env file in the root directory of the project and add this line SKIP_PREFLIGHT_CHECK=true inside the file.

then try to run yarn start.

Huge shout to you man and great thanks.

I experienced this issue today.
Workaround with .env file solved it

+-- @storybook/[email protected]
| +-- @storybook/[email protected]
| | +-- [email protected]
| | | `-- [email protected]  deduped
| | `-- [email protected]  deduped
| `-- [email protected]
`-- [email protected]
  `-- [email protected]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

I still get the error with:
[email protected]
@storybook/[email protected]
@storybook/[email protected]

Moment storybook deps are removed the issues goes away.

Create a .env file in the root directory of the project and add this line SKIP_PREFLIGHT_CHECK=true inside the file.

then try to run yarn start.

This has been the only way for me so far to work around the error

I've opened an issue with CRA: https://github.com/facebook/create-react-app/issues/9010
I think this is a platform design problem

Were there any changes applied to Storybook that would resolve that problem?

@TeoTN A lot of work has been done to make storybook work much much better with CRA out of the box & typescript.

You mostly have @mrmckeb to thanks for it

Also facing this issue:

├─┬ @storybook/[email protected]
│ ├─┬ @storybook/[email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]  deduped
│ │ └── [email protected]  deduped
│ └── [email protected] 
└─┬ [email protected]
  └── [email protected] 

I am troubleshooting build performance issues and now I am not sure if this can be causing it or I can simply ignore it using SKIP_PREFLIGHT_CHECK=true.

Same issue:

+-- @storybook/[email protected]
| `-- @storybook/[email protected]
|   +-- [email protected]
|   | `-- [email protected]  deduped
|   `-- [email protected]  deduped
+-- @storybook/[email protected]
| `-- [email protected]
`-- [email protected]
  `-- [email protected]

The funny thing is that I copied the template of another CRA project where the correct version of storybook was installed

├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   ├─┬ [email protected]
│   │ └── [email protected]  deduped
│   └── [email protected]  deduped
├─┬ @storybook/[email protected]
│ └── [email protected] 
└─┬ [email protected]
  └── [email protected]  deduped

currently the whole org. works with npm so moving to yan might be an issue.

Me too:

├─┬ @storybook/[email protected]
│ └─┬ @storybook/[email protected]
│   └── [email protected]  deduped
├─┬ @storybook/[email protected]
│ └── [email protected]
└─┬ [email protected]
  └── [email protected]

I had the same problem and the only thing that solved was putting storybook in the devDependencies (which I guess it's fine as it is only used for development purposes by us)

"devDependencies": {
    "storybook": "^6.0.3",
    "@storybook/react": "^6.0.4",
    "@types/storybook__react": "^5.2.1",
    "@storybook/addon-actions": "^6.0.4",
    "@storybook/addon-knobs": "^6.0.4",
    "@types/storybook__addon-knobs": "^5.2.1"
}

@Alellujah You'll probably want to get rid of those @types/storybook__ packages. Storybook now has built-in types

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Still happening to me

├─ [email protected]
│  └─ [email protected]
└─ [email protected]

 "@storybook/addon-actions": "^6.0.26",
    "@storybook/addon-essentials": "^6.0.26",
    "@storybook/addon-links": "^6.0.26",
    "@storybook/node-logger": "^6.0.26",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.26",
    "react-scripts": "3.4.3",

using yarn, resolutions does nothing.