Create-react-app: Peer dependency issue between Create-React-App and Storybook

[VincentLanglet]

I previously asked a question about the warning about unmeet peer dependency here: https://github.com/facebook/create-react-app/issues/6134
I had the answer these are just warnings and nothing to worry about.

Unfortunately now I have errors:
When I install "@storybook/react" and run "storybook": "start-storybook -p 9009 -s public",
I get Error: Cannot find module 'babel-loader/package.json' from ...

But if I install babel-loader, and run "start": "react-scripts start", I get

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:

  "babel-loader": "8.0.4"

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

Of course, it's fixable if I install the exact version "8.0.4". Like explains here https://github.com/storybooks/storybook/issues/5183
But shouldn't create-react-app re-think about the way dependencies are used ?

I don't know a lot about how it works. But why react-script version can't use his dependencies version and let other dependencies to use their ?

[mrmckeb]

Hi @VincentLanglet, this has been reported before as you mentioned.

I'm currently working on a PR with Storybook to resolve this properly.
https://github.com/storybooks/storybook/pull/5308

[VincentLanglet]

@mrmckeb Yes i saw that, a big thanks to you for working on it.

But I still wonder why it's not possible for react-script to use her own version of babel-loader and @storybook/react to use her own version of babel-loader too ?
The same could be done for others dependencies like jest or eslint.

For example, in my package.lock I have two qs version which cohabit together.

[email protected], qs@~6.5.1, qs@~6.5.2:
  version "6.5.2"
  ...

qs@^6.5.1, qs@^6.6.0:
  version "6.6.0"
  ...

Why is it different with react-script dependencies ?
(And not every dependencies, I have different @babel/core versions for example)

[gcallaghan]

I don't have storybook installed and I see this error as well. It seems there is a strict match for both babel-preset-react-app and react-scripts

$ npm ls babel-loader
[email protected] /Users/gcallaghan/work/my-package
└─┬ [email protected]
  ├── [email protected]
  └─┬ [email protected]
    └── [email protected]

[mrmckeb]

Hi @gcallaghan, that's odd, thanks for raising. Those projects should definitely be aligned, and realistically, we could resolve babel-loader from babel-preset-react-app... Would you be interested in raising a PR to look into that?

[VincentLanglet]

@gcallaghan your react-scripts is not up to date.
The 2.1.5 version use [email protected].

[gcallaghan]

I'll run yarn upgrade on my react-scripts now and see if that fixes it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[mkay581]

@gcallaghan did upgrading your react-scripts solve the issue? I'm having this same problem.

[gcallaghan]

@mkay581 At the time yes, but my understanding is type of issue with CRA happens from time to time due to transitive dependencies. Unfortunately I don't have the github issue or thread handy.

[mrmckeb]

Hi there, newer releases of Storybook will use your babel-loader from Create React App. So, you can just remove it from your package.json.

Let us know if you have any other issues!

[mkay581]

Thanks! can you add a link to the discussion thread? Or link to the Storybook PR that fixes it? I'm curious to know what the fix is and when it will be available.

[mrmckeb]

@mkay581, I fixed this over at Storybook itself - take a look at the preset for create-react-app if you're interested. There's a bit happening there.