storybook: babel-loader conflicts with create-react-app version

Confirming that this is still an issue with the latest versions of creat-react-app and storybook.

Edit: create-react-app will complain about an incorrect babel-loader version in node_modules. I was able to resolve the issue using yarn add -D --exact babel-loader@8.1.0, which was the version that CRA required.

You should add a resolution dependencies in your package.json file :

UPDATE : Has @newmandani said, this solution work only if you use yarn

"resolutions": { "babel-loader": "8.1.0" }

@ayoola-moore Yes, the workaround is to change the line in package.json to:

"babel-loader": "8.0.4"

This way both react-scripts and storybook will work. Still looking into a better solution. 😕

cc @artisologic @YoannDelpierre @ovionlogis @patricknick @mrmckeb @ivnkld @viniciusreiss @dlevs @Jipperism @euskonadox @fuadajip @AMTourky @greatermeans @tmeasday @Eugene-Sviridov @nerfologist

Adding a resolutions to my package.json on a Yarn project was the best solution for me, because you can see later that you’re applying a fix and when this finally gets resolved you can remove it.

  "resolutions": {
    "babel-loader": "8.1.0"
  }

@shilman FYI I’m still getting this issue with 6.1.20:

Very thanks @DylanCulfogienis , you saved my day!! I spend hours to remove and install storybook and even the hold node_modules dir again and agian, and yarn add -D --exact babel-loader@8.1.0 did work!

What happen engineers? Do u need help with this huge error? XD A big project that not works no helps so much!

Still an issue with "@storybook/react": "^6.3.9" and "react-scripts": "4.0.3", no babel-loader in package.json

Hmm when I remove babel-loader dep then storybook breaks… 😕

Hi, unfortunately, upgrading storybook dependencies to alpha versions with npx sb upgrade --prerelease didn’t do the trick, there’s still the same babel-loader issue.

I was able to bypass it by using one of the following hacks:

1. Yarn resolutions.

  "resolutions": {
    "babel-loader": "8.1.0"
  }

1. Or adding “babel-loader”: “8.1.0” explicitly to the dev dependencies in the package.json even though react-scripts and storybook already have babel-loader es a dependency.

2. Or adding SKIP_PREFLIGHT_CHECK=true to the .env file.

I’m using the latest create-react-app ("react-scripts": "^4.0.3") and storybook ("@storybook/react": "^6.3.6").

Sadly, they are hacks and are not recommended to use since it creates other hard to debug bugs.

@DylanCulfogienis solution fixed it for me as well, after a half-day battle. There’s another command from https://github.com/storybookjs/storybook/issues/12408 wrapped up in here, but this is the setup that got me going:

# Create project
npx create-react-app my-project
cd my-project

# Add Storybook:
npx -p @storybook/cli sb init

# Update Storybook
npx sb@next upgrade --prerelease

# Fix babel error
yarn add -D --exact babel-loader@8.1.0

# Start app
yarn start

# Start Storybook
yarn storybook

Also ran into this when installed CRA v4 with SB v6.1:

You should add a resolution dependencies in your package.json file :

"resolutions": { "babel-loader": "8.1.0" }

It can work for yarn only.

This is still an issue on fresh installs of the latest CRA/SB versions (4.0.1 and 6.1.18, respectively, at the time of this writing).

The workaround doesn’t seem to work for me. I still see the conflicts after trying the workaround.

Make sure you remove the leading “^” otherwise you will still get 8.0.5

This is still an issue…

    "resolutions": {
        "babel-loader": "8.1.0"
    }

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.23 containing PR #14811 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

And everyone in the team will be forced to use Yarn

They should be forced to use either or, not both at the same time in the same project

Please i really need help.

i try everything but enything work.

`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.5”

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:

c:\Users\Z-Dra\node_modules\babel-loader (version: 8.0.6)

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.

In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:

1. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

2. Check if c:\Users\Z-Dra\node_modules\babel-loader is outside your project directory. For example, you might have accidentally installed something in your home folder.

3. Try running npm ls babel-loader in your project folder. This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above 😃 We hope you find them helpful!

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! mrfox@0.1.0 start: react-scripts start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the mrfox@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Z-Dra\AppData\Roaming\npm-cache_logs\2019-05-29T12_53_58_726Z-debug.log`

Please some one can help me?

Using "react-scripts": "2.1.8" and storybook v5, I’m getting the same error. As stated by others, manually adding "babel-loader": "8.0.4" as a devDependency fixed it.

@GabrielModog I ended up using Yarn resolutions. However, I’m not sure if it’s the safes one.

I’m not a fan of adding SKIP_PREFLIGHT_CHECK to the .env because it will skip other checks. And, also the whole team needs to do that manually.

Adding babel-loader explicitly to the package.json also seemed to not work for every team member.

Surprised that this issue still isn’t resolved. Isn’t storybook + CRA a super common setup?

Edit: adding "babel-loader": "8.1.0" to my deps somehow fixed it now. Which is really weird considering when I check npm ls babel-loader I can see that 8.2.2 is still used in some places. But not gonna complain lol.

How come this issue still exists for 2 years?!

Good golly!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.25 containing PR #5308 that references this issue. Upgrade today to try it out!

Because it’s a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.

+1 I have the same issue with CRA and "@storybook/react": "^6.1.21",

Same problem here : React 4.0.1 and

yarn install @storybook/react 

front  | There might be a problem with the project dependency tree.
front  | It is likely not a bug in Create React App, but something you need to fix locally.
front  | The react-scripts package provided by Create React App requires a dependency:
front  |   "babel-loader": "8.1.0"
front  | Don't try to install it manually: your package manager does it automatically.
front  | However, a different version of babel-loader was detected higher up in the tree:
front  |   /path/to/front/node_modules/babel-loader (version: 8.2.2) 

PS : Should we open a new issue as it concern different version of the same problem ?

• first, remove package-lock.json or yarn.lock file
• then remove the node_modules folder
• use yarn instead of npm, and then add this to your package.json file: “resolutions”: { “babel-loader”: “8.1.0” },

That’s it. It will fix the issue.

The npm equivalent would be to use overrides:

"overrides": {
  "babel-loader": "8.1.0"
}

Though you need npm >= 8.3

Hello, I am a CRA user and faced this problem when I initialized storybook by the following command described in the document for React.

npx -p @storybook/cli sb init --type react

Then, I fixed the problem by initializing with the following.

npx -p @storybook/cli sb init --type react_scripts

(And the automatic detection without --type option was also successful. cool!)

I think this is a lack of documentation and can make such kind of mistakes. Please add explanation about --type react_scripts to the Storybook for React page or create a separate tutorial for CRA.

Thanks!

Just in case anyone else lands in the same situation as me: I couldn’t for the life of me get the Storybooks + CRA integration to work, where Storybooks uses the build setup of CRA. However, I then tried to move my stories into the src/ directory of my CRA project, and suddenly it worked. I don’t know why, or if it has been recommended or required all along, but this fixed it for me.

Any updates about this one? can’t solve it by just adding "babel-loader": "8.0.4" or any of the other steps

Still having the same issue

Hi. Will someone kindly tell me how to unclone a computer? My “friend” is a fuckwad.

Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: Klaus Kazlauskas @.> Sent: Monday, September 26, 2022 12:15:57 PM To: storybookjs/storybook @.> Cc: Subscribed @.***> Subject: Re: [storybookjs/storybook] babel-loader conflicts with create-react-app version (#5183)

The npm equivalent would be to use overrides:

“overrides”: { “babel-loader”: “8.1.0” }

Though you need npm >= 8.3

This worked for me. I also needed to override the webpack version like this:

{ “overrides”: { “babel-loader”: “8.1.0”, “webpack”: “4.44.2” } }

I’m using Storybook v6.5.0, react-scripts v4.0.3, and React v16.13.0.

— Reply to this email directly, view it on GitHubhttps://github.com/storybookjs/storybook/issues/5183#issuecomment-1258363433, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ARIPUD4I3N4O2TPD3BMTTNTWAHK43ANCNFSM4GOW77AQ. You are receiving this because you are subscribed to this thread.Message ID: @.***>

Can confirm I’m also running into this, Can we reopen this issue? I dont really want to have to include babel-loader in my package if im not using it my self? I can confirm @DylanCulfogienis fix works though!

Thanks guys, I’ll make a note to update that documentation.

FYI we’ve got some game-changing work on CRA support coming from @mrmckeb – hopefully will make reasoning about these issues a lot easier

@revmischa Babel is how you can use TypeScript. The TS team give two paths - the TypeScript compiler, or a Babel plugin.

@rlecaro2 and @Akaryatrh, we made a change some months ago, where in the latest Storybook releases, babel-loader is not installed alongside CRA, and is instead found from within CRA.

As I understand it, you have no issues at all - apart from the fact that files within .storybook are not being processed correctly. This is because Create React App’s config ignores files outside of source.

We made a small change to allow for TypeScript inside the .storybook directory here, and could do the same for the rest of the config. I’m assuming you’re both not using TypeScript which is why that fix didn’t work for you.

I’m a little confused why that devDependencies fix works though… I think that also needs investigation.

Also note that this is a new issue, not related to the above. As comments here alert all users, I’ve created a new ticket here: #7201. Please add details there.

@vipyoshi A couple comments:

• You shouldn’t pass --type react. Let it use the CRA template instead.
• This is fixed in the latest version @storybook/cli@next and we’re releasing that as stable in the next 24h.

Updating react-scripts worked for me (thx, @nguyentuandat). I was on 2.1.1, updated with instructions from the changelog:

yarn add --exact react-scripts@2.1.5

The workaround doesn’t seem to work for me. I still see the conflicts after trying the workaround.

Still an issue with "@storybook/react": "^6.3.9" and "react-scripts": "4.0.3", no babel-loader in package.json

upgrading to react-scripts v5 fixed this for me

@egor-xyz I have the same webpack issue after I added babel-loader in resolutions, so I add CRA required version of webpack in resolutions as well. Not sure if this is a good solution but it solves the issue for me.

Mine is "@storybook/react": "^6.4.9" and "react-scripts": "3.3.0"

"resolutions": {
    "babel-loader": "8.0.6",
    "webpack": "4.41.2"
  }

Fixed in #13607 and available in 6.1.12 / 6.2.0-alpha

Basic Setup without Typescript does not even work for me

1. npx create-react-app my-app
2. cd my-app
3. npx -p @storybook/cli sb init --type react

CRA expects "babel-loader": "8.0.5" but finds 8.0.6. However the generated packages.json hsa following devDependencies listed:

  "devDependencies": {
    "@storybook/react": "^5.0.11",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@babel/core": "^7.4.5",
    "babel-loader": "^8.0.6"
  }

Setting the version to "babel-loader": "8.0.5" does resolve this issue.

Also I have a similar Issue in another project where CRA (3.0.1) expectes "webpack": "4.29.6" but finds 4.32.2. That is not defined in my dependecird inside the package.json npm ls webpack shows:

+-- @storybook/react@5.0.11
| +-- @storybook/core@5.0.11
| | `-- webpack@4.32.2  deduped
| `-- webpack@4.32.2
+-- react-scripts@3.0.1
| `-- webpack@4.29.6
`-- rollup-plugin-size-snapshot@0.8.0
  `-- webpack@4.32.2  deduped

Storybook@5.0.11 provides a newer version of webpack, but CRA wants an older version. Adding webpack@4.29.6 to the dependencies does fix it. Not quite sure if this is an issue with storybook thou…

I changed version from 2.1.2 to 2.1.5 then it resolved

I have been through the same issue and finally fixed it. I changed the babel-loader back to "8.0.4"in my package.json file and needed to delete the package-lock json file and I was then able to start and test with storybook. I hope this is helpful.

• first, remove package-lock.json or yarn.lock file
• then remove the node_modules folder
• use yarn instead of npm, and then add this to your package.json file: “resolutions”: { “babel-loader”: “8.1.0” },

That’s it. It will fix the issue.

@AlexMachin1997 They (create-react-app) removed their dependency check that assumed their dependencies would be hoisted to the root of node_modules in https://github.com/facebook/create-react-app/pull/11474

This appears to be fixed in CRA5. I’m closing this for now. Please let me know if there’s more to be done here!

When I’m changing “babel-loader”: “8.1.0” - I’m getting the same issue with webpack: .../node_modules/webpack (version: 4.46.0)

Solve "@storybook/react": "^6.4.9" and "react-scripts": "4.0.3" with this

"resolutions": {
        "babel-loader": "8.1.0"
    }

However if I use npm to install "@storybook/react": "^6.4.9" and "react-scripts": "4.0.3", then no workaround needed, the npm resolves the babel-loader to be 8.1.0

This is an issue for me as well, and I’m not even using yarn.

I have a lerna monorepo with npm. There are two sibling packages. One component library with storybook, the other made with create react app. Latest versions of everything.

When I try to import the babel-transpiled component library into the CRA, I get the error listed in this issue.

I have to manually set the version: babel-loader: 8.1.0 to get rid of the issue. (Whereas it automatically installed at ^8.2.2.

I have to hoist the dependencies to avoid the duplicate react issue. But if I do then I have to deal with this babel-loader version issue.

I am experiencing this too. My question is: does the babel-loader version used in storybook really have to be ^8.2.2 or can it just be lowered a bit? If it was ^8.0.0 or something then this wouldn’t be an issue.

I tried adding the babel-loader dep exactly and explicitly, that produced no changes for the better. I then added the yarn resolution, and that works with CRA and Storybook - which makes me wonder, why does storybook insist on a newer version than other key packages require? This would be a very easy fix to at least add compatibility with current versions of create-react-app.

EDIT: I see there’s a build error in Storybook:

ERROR in ./.storybook/generated-refs.js
Module build failed (from /Users/omar/code/every.org/every.org/node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-polyfill-corejs2'

So it looks like there is an incompatibility, but it doens’t actually stop storybook from running. interesting. But that goes away if I just run

yarn add -D babel-plugin-polyfill-corejs2

So presumably if that were just added as a dependency alongside loosening the dependency, things might just be peachy.

1 possible workaround is to add babel-loader@8.1.0 to dependencies in package.json. Another is to add SKIP_PREFLIGHT_CHECK=true to .env.

Just confirming that I’m still stumbling on this issue as of the date of my post and that @DylanCulfogienis solution of explicitly installing babel-loader solved it. I’m also using a yarn monorepo with a ‘web’ package for the react application but did not stumble on the problem described by @cjmyles, possibly unrelated?

@mrmckeb I think it’s more about only finding

npx -p @storybook/cli sb init --type react

but not

npx -p @storybook/cli sb init --type react_scripts

in the docs when looking at:

• https://storybook.js.org/docs/guides/quick-start-guide/
• https://storybook.js.org/docs/guides/guide-react/

so you think you’re doing everything correct by using --type react when you have a CRA repo.

using --type react led to Cannot find module 'babel-jest' errors - --type react_scripts is working out of the box.

@aericson, sorry for the inconvenience. I’ll look today.

Note, this is in the advanced config. It says:

You may have tried to use our quick start guide to setup your project for Storybook. If it failed because it couldn’t detect you’re using React, you could try forcing it to use React.

I’ll update to mention CRA too.

@isenese, sorry I have been out of action a bit recently.

This is resolved in new versions of Storybook, or at least should be - please provide version details if you’re still facing this and we can help out.

@ramonex1

Yes for me it’s just a stupid think.

It’s another node modules in my folders

Great! I’ll try to figure out what’s making the dev dependency work. Just for anyone else, the issue is #7201 (minor typo).

@shilman @mrmckeb with the latest version:

"@storybook/addon-actions": "^5.1.1",
"@storybook/addon-links": "^5.1.1",
"@storybook/addons": "^5.1.1",
"@storybook/react": "^5.1.1",

JSX syntax is not transformed in .storybooks/config.js and start-storybook fails with a syntax error (on the first <).

Using the previous workaround of having babel-loader installed but with the version in sync with CRA works fine.

I tried to check if CRA uses babel-preset-react in some but not all folders but didn’t get anywhere.

For context, I’m using CRA 3.0.1 and haven’t ejected.

What else could be the issue (should I open one)? How can I help?

_{PS: I’m using a decorator for global styles btw.}

I discovery that I have babel-loader 8.0.6 installed globally on my home directory /home/user/node_modules, so under my project directory was installed babel-loader 8.0.5, so I remove npm remove babel-loader on my home directory(8.0.6), than all work fine.

Looks like I had a different version in a project in an enclosing folder.

@mrmckeb I just released @storybook/preset-typescript and need to update the typescript docs anyway. If you let me know what I should say about Typescript and CRA, I’d be happy to work that into the update. Thanks! 🙇

I just tried the latest beta build. We are using storybook with react-scripts@3.0.1 and the Typescript setup described here: https://storybook.js.org/docs/configurations/typescript-config/#setting-up-typescript-with-babel-loader

This fails though as the require cannot find the CRA babel-loader. Is there already a solution for that?

Yes, this is a good workaround for now @nguyentuandat, but only temporary until we work out how to handle this properly.

Thanks @oscargws, we’re actively investigating this and #5308 was raised to solve this. @ndelangen, can you take a look at that PR?

I was able to get the work around working. Thanks

Same issue… any workaround yet?

Having the same issue 😕