CODEWITHSUNDEEP
reactjsdependency-managementbabel-loader
Eliav Louski
Eliav Louski

Reputation: 5264

dependency tree error using create-react-app and storybook

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/[email protected]":
  version "6.2.9"
  ...
  dependencies:
    ...
    babel-loader "^8.2.2"

already tried

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?

Upvotes: 4

Views: 2100

Answers (2)

Eddie Eddie
Eddie Eddie

Reputation: 39

So for anyone to whom this is still unclear.

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

then they clashed.

SOLUTION:

yarn add [email protected]

UPDATE:

The error you often see is that CRA (create-react-app) relies on specific dependencies (e.g. for webpack or babel).

What can also be done is you specify which versions those dependencies must resolve to, based on the error messages

This can be done using the resolutions field in package.json, e.g.:

    "resolutions": {
        "babel-loader": "8.1.0",
        "webpack": "4.x.x",
    }

After this all will work Fine.

Upvotes: 4

phuber
phuber

Reputation: 11

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 [email protected]

Upvotes: 1

Related Questions