storybook
storybook copied to clipboard
storybookjs
CRA & Storybook webpack clash
CRA 2.1.5 & Storybook webpack clash - I tried with the latest alpha v of storybook v5.1.0-alpha.25 and the stable version and the problem happens in both
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.28.3"
Don't try to install it manually: your package manager does it automatically.
@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!
![stale[bot] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
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
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.
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.
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.
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?