CRA & Storybook webpack clash

[firaskrichi]

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.

[shilman]

@mrmckeb Is this related to #5308?

[mrmckeb]

@shilman, it may require a similar fix.

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

[baptooo]

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]

[firaskrichi]

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

[shilman]

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

[stale]

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!

[yairEO]

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

[firaskrichi]

@mrmckeb what do you advise doing here?

[john-bell-gw]

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

[stale]

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!

[annakjet]

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?

[annakjet]

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

[mrmckeb]

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.

[stale]

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!

[seantcoyote]

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.

[IvanKovnovic]

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

[ndelangen]

@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.. 🙇

[RoeelCohen]

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.

[aleph-naught2tog]

Me too:

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

[Alellujah]

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

[shilman]

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

[stale]

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!

[julesvirallinen]

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.

[stale]

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!

[brahmdev]

In my case, Storybook has "webpack": "^4.44.2" dependency and react-scripts has "webpack": "4.44.2" dependency in my case (difference in ^).
And the recent release from webpack was 4.44.6 and that gave me below issue.

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

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:

  /<my-directory-path>/node_modules/webpack (version: 4.46.0) 

When I did yarn why webpack
then there was 2 version of webpack, 4.44.2 and 4.46.0

I added below in my package.json file to have the exact version of webpack

"resolutions": {
  "webpack": "4.44.2"
},
  

It worked for me and hope there is no issue with this solution.
I hope that helps you guys.
Reference: https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

Thanks!

[shomukai]

Got the same issue.

Found a solution for npm (npm doesn't support resolutions in package.json) :
Manually add "webpack": "4.44.2" to devDependencies and run npm i fixed the issue. => This will force npm install the right version webpack and depute it, also this will update package-lock.json with the right version => so that storybook doesn't install its own version.
Then you can manually remove "webpack": "4.44.2" from devDependencies and run npm i again. package-lock.json will stay the same.

Storybook is working with any version of webpack 4.44.x and above, so should run properly.

For yarn, not sure whether it works the same way as npm or not, but add resolutions should fix it as mentioned in above posts.

By the way, react-scripts should be in dependencies, not devDependencies.

[johnnyoshika]

@shomukai's technique worked like a charm for me.

[outdoteth]

If you're using yarn then add this to package.json:

"resolutions": {
  "webpack": "4.44.2"
}

and then:

yarn install

[maxgfr]

Problem solved with this version : https://github.com/storybookjs/storybook/releases/tag/v6.3.11

[johnnyoshika]

Version 6.3.11 worked well for me also. When I first upgraded all storybook packages manually to 6.3.11 I had trouble with some dependencies, but then I tried again with npx sb@latest upgrade instead and everything worked well.

[AlmogBaku]

Unfortunately, neither the versions 6.3.12, 6.3.11 nor @shomukai works for me :(

I'm trying every time again from scratch (no node_modules and no lock file)...

[iamgutz]

For me the fix was the one suggested by @outdoteth
Add the packages to the resolutions in package.json, in my case the issue was 2 packages, babel-loader and webpack. So my resolutions look like:

"resolutions": {
    "babel-loader": "8.1.0",
    "webpack": "4.42.0"
  },

IMPORTANT after adding this to the package.json you MUST run yarn install otherwise it won't work.

[stale]

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!

[AlmogBaku]

this is still not fixed.

[aricma]

thx @johnnyoshika
npx sb@latest upgrade && rm -rf node_modules && yarn worked for me
@AlmogBaku removing the node_modules was necessary ... it was still crashing before reinstalling everything "clean"

[aventide]

For me, either using yarn OR moving react-scripts back to regular dependencies solves the issue. Though, I don't totally understand why the default location of react-scripts is dependencies by default in CRA.

[ndelangen]

Is this still an issue in 7.0 beta?