babel-loader conflicts with create-react-app version

[aericson]

Describe the bug
After creating a new project with create-react-app yarn start and yarn test do not run.
There is a conflict with babel-loader version.

Changing the line in package.json to "babel-loader": "8.0.4" seems to fix it.

To Reproduce
Steps to reproduce the behavior:

1. Start a project with npx create-react-app taskbox
2. Init storybook npx -p @storybook/cli sb init
3. Run yarn test

Expected behavior
Should run the tests.

Code snippets

npx create-react-app taskbox

Creating a new React app in /Users/aericson/projects/taskbox.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 5 new dependencies.
info Direct dependencies
├─ react-dom@16.7.0
├─ react-scripts@2.1.3
└─ react@16.7.0
info All dependencies
├─ react-dev-utils@7.0.1
├─ react-dom@16.7.0
├─ react-error-overlay@5.1.2
├─ react-scripts@2.1.3
└─ react@16.7.0
✨  Done in 75.22s.

Initialized a git repository.

Success! Created taskbox at /Users/aericson/projects/taskbox
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd taskbox
  yarn start

Happy hacking!
➜  projects cd taskbox
➜  taskbox git:(master) npx -p @storybook/cli sb init
npx: installed 423 in 38.734s
[BABEL] Note: The code generator has deoptimised the styling of /Users/aericson/.npm/_npx/7855/lib/node_modules/@storybook/cli/node_modules/lodash/lodash.js as it exceeds the max of 500KB.

 sb init - the simplest way to add a storybook to your project.

 • Detecting project type. ✓
 • Adding storybook support to your "Create React App" based project. ✓
 • Preparing to install dependencies. ✓

yarn install v1.12.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@storybook/react > @emotion/styled > @emotion/styled-base@0.10.6" has unmet peer dependency "@emotion/core@0.x.x".
warning " > babel-loader@8.0.5" has unmet peer dependency "webpack@>=2".
[4/4] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 58.11s.

 • Installing dependencies. ✓

To run your storybook, type:

   yarn storybook

For more information visit: https://storybook.js.org

➜  taskbox git:(master) ✗ yarn test
yarn run v1.12.3
$ react-scripts test

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:

  /Users/aericson/projects/taskbox/node_modules/babel-loader (version: 8.0.5)

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:

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

  6. Check if /Users/aericson/projects/taskbox/node_modules/babel-loader is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. 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!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  taskbox git:(master) ✗

Here are the versions installed:

npx create-react-app --version
2.1.3

and the versions that storybook added with `sb init`

  "devDependencies": {
    "@storybook/react": "^4.1.4",
    "@storybook/addon-actions": "^4.1.4",
    "@storybook/addon-links": "^4.1.4",
    "@storybook/addons": "^4.1.4",
    "@babel/core": "^7.2.2",
    "babel-loader": "^8.0.5"
  }

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Framework: react
• Version: 4.1.4

[greatermeans]

+1

[tmeasday]

Does this mean we should not install babel-loader for CRA apps?

[shilman]

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

[AMTourky]

Having the same issue 😕

[ayoola-moore]

Same issue... any workaround yet?

[shilman]

@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

[mrmckeb]

@shilman, I'm also thinking about this. We could consider exposing babel-loader from react-scripts... that might help. There was a recent PR that did something similar for chalk (facebook/create-react-app#6150).

Alternatively, would it just be easier if this was a dependency of @storybook/react? Rather than a peer-dependency. I realise that might cause issues for non-CRA users though.

Or, we could, when react-scripts exists, directly import babel-loader from react-scripts/node_modules/babel-loader. We already load the config from the react-scripts folder.

[shilman]

@igor-dv @ndelangen @tmeasday any opinions on the options that @mrmckeb has laid out above? Is this something we can handle with a CRA preset?

[jlmelis]

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

[dstroot]

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

[tmeasday]

I think we could probably require babel-loader out of whereever react-scripts finds it (using requireFrom or the like, although if react-scripts exported it that would make it easier) if we are using CRA's webpack config.

A preset would make that nicer but I think we already have special case code for CRA (to use it's config) so maybe it would be relatively easy to do this there?

[jlmelis]

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 what I have in my package.json: "babel-loader": "8.0.4"

Are there other steps that need to be taken for the work around?

[vsubbotskyy]

@jlmelis, what version of "react-scripts" is installed? I can confirm that for "react-scripts": "2.1.3" workaround seem to be working fine

[jlmelis]

@vsubbotskyy - I am running create-react-app with npx. The version it shows is 2.1.3. Something probably else screwy with my set up. I'll just keep an eye on this to see if a fix comes through. Thanks!

[jlmelis]

I was able to get the work around working. Thanks

[mrmckeb]

I had a look around, and I think at this stage it'll be easier to require in the loader from CRA (when CRA is used). I'll make a PR now.

[mrmckeb]

@tmeasday, it would be great if you could take a look at and provide feedback on PR #5308.

[Unremittant]

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.

[tsirolnik]

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

[MattyPalka]

@tsirolnik same fix as #5183 (comment) with updated version required by react-scripts i.e.
"babel-loader": "8.1.0"

[johnnybenson]

This is still an issue...

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

[Captainlonate]

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.

[cryptoAlgorithm]

Yeah same issue here, thankfully the resolutions method fixed it right up for me. It seems like a fragile fix though, since it will probably break when CRA starts relying on features in a newer version of babel-loader. Hoping for a fix soon as well, we can only hope the CRA team will do something about this :)

[shilman]

@cryptoAlgorithm pretty sure it's fixed in CRA5 which is due out any week now

[fabricioAburto]

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

[kinotto]

"@storybook/react": "^6.4.9" and "react-scripts": "3.4.0" none of the solutions above work for me

[marsonmao]

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

[egor-xyz]

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

[annapolar]

@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"
  }

[egor-xyz]

@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"

  }

It's not good solution but it works for now. I hope it will be fixed with CRA 5

[shilman]

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!

[72gm]

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

[AlexMachin1997]

@72gm Just came across your message, it seem's to work as expected though I'm confused why and how. Wonder what they did to fix this issue.

[merceyz]

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

[habibi4webdesign]

• 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.

[chuxmykel]

• 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.

This fixed it for me.

[broodfusion]

• 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

[klauskpm]

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.

[OpheliaHiney]

Hi. Will someone kindly tell me how to unclone a computer? My "friend" is a fuckwad. Get Outlook for Android<https://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 GitHub<#5183 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ARIPUD4I3N4O2TPD3BMTTNTWAHK43ANCNFSM4GOW77AQ>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>