dependency tree error using create-react-app and storybook

Question

TLDR:

how can I instruct storybook to use babel-loader v8.1.0 OR force react-scripts to use babel-loader v^8.2.2?

Details

I Develop a lib with./example folder which is itself project created with create-react-app. I wanted to add storybook in addition to the normal example pages, so I installed storybook.
after installing storybook I can no longer start the example project with yarn start or the story book with yarn storybook .

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.1.0"

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:

  D:\Eliav\projects\git projects\react-xarrows\examples\node_modules\babel-loader (version: 8.2.2)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

well I know what the issue but I don't know how to fix it:

I'm using react-scripts v4.0.3 which for unknown reason requiring exactly babel-loader v8.1.0. i can see this it in yarn.lock:

react-scripts@^4.0.1:
  version "4.0.3"
  ...
  dependencies:
    ...
    babel-loader "8.1.0"

and storybook requiring babel-loader v8.2.2 or above:

"@storybook/builder-webpack4@6.2.9":
  version "6.2.9"
  ...
  dependencies:
    ...
    babel-loader "^8.2.2"

already tried

• what is written in the error above.
• hoped that yarn upgrade would upgrade babel-loader from v8.1.0 to v8.2.2 but it does not work because react-scripts require exactly v8.1.0

a workaround that worked

Create a.env file in your project directory and include SKIP_PREFLIGHT_CHECK=true in the file.

but I want to avoid it. is it possible?

Answer 1

2 Links to consider https://github.com/facebook/create-react-app/issues/10123 and https://github.com/storybookjs/storybook/issues/4764#issuecomment-740785850

Seems that most people are installing the package to get it to work even thou it says not to install in manually.

So try:

yarn add babel-loader@8.1.0

Answer 2

So for anyone to whom this is still unclear.

I used create-react-app to create a new app I added storybook using sb init

then they clashed.

SOLUTION:

yarn add babel-loader@8.1.0

After this all will work Fine.