DEV Community

Cover image for A dependency conflict between CRA and Storybook
Brandon Wie
Brandon Wie

Posted on • Edited on

3 3

A dependency conflict between CRA and Storybook

Intro

You may find this post helpful IF you,

  1. initialized a project using CRA  - in my case, I used npx create-react-app myApp - template redux-typescript
  2. installed storybook using npx sb init on top of CRA settings
  3. npm start or yarn start throws an error regarding webpack(4.44.2) and/or babel-loader(8.1.0) package

I tried all possible methods listed on StackOverflow and other blogs. However, I just wanted to share the one that fixed my issue.
Some suggest using the SKIP_PREFLIGHT_CHECK flag; it won't resolve the issue but only covers the matter.

A part of the logged out instructions

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.44.2"
Enter fullscreen mode Exit fullscreen mode

What worked in my case

In package.json, add the option below

 "optionalDependencies": {
 "babel-loader": "8.1.0" // or webpack if it's the one causing the error.
 }
Enter fullscreen mode Exit fullscreen mode

Here's the link to the StackOverflow post.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs