storybook: babel-loader devDependency causes error in Create-React-App
Describe the bug Installing Storybook in a Create-React-App project causes the following error, preventing the app from starting in development:
$ react-scripts start
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:
/Users/alanrussell/Documents/playground/sb-sc-bug-repro/node_modules/babel-loader (version: 8.2.1)
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/alanrussell/Documents/playground/sb-sc-bug-repro/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.
Following the steps listed fixes the problem.
To Reproduce
Minimal repro here: https://github.com/ajrussellaudio/sb-sc-bug-repro (also includes styled-components)
- Create a new React app with Create-React-App (I used yarn and the TypeScript template):
yarn create react-app my-app --template typescript - Install Storybook:
npx sb init - Start Storybook:
yarn storybook(works fine) - Start the React app:
yarn start(throws error above)
Expected behavior
sb init should work with the dependencies of the project
System
System:
OS: macOS 10.15.7
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 15.1.0 - ~/.nvm/versions/node/v15.1.0/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.0.8 - ~/.nvm/versions/node/v15.1.0/bin/npm
Browsers:
Chrome: 86.0.4240.193
Firefox: 82.0.3
Safari: 14.0
npmPackages:
@storybook/addon-actions: ^6.0.28 => 6.0.28
@storybook/addon-essentials: ^6.0.28 => 6.0.28
@storybook/addon-links: ^6.0.28 => 6.0.28
@storybook/node-logger: ^6.0.28 => 6.0.28
@storybook/preset-create-react-app: ^3.1.5 => 3.1.5
@storybook/react: ^6.0.28 => 6.0.28
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 15
- Comments: 17 (3 by maintainers)
Hello @ajrussellaudio, thanks for your work.
Unfortunately, it’s still not working in v6.1.9; if I set up a new project with
…it still complains about
babel-loader@8.2.2conflicting withreact-script’s 8.1.0.in the meantime you can install babel-loader locally fixed to version 8.1.0
(
package.json)the error went away for me after doing that
Hello… this is still happening. I’m on SB 6.2.1 and react-scripts@4.0.3… Storybook is forcing a newer version of babel-loader
@ChristianIvicevic Nobody ist installing
babel-loaderit explicitly. What are you talking about? come back to the real world.The title of this issue should be “storybook breaks CRA setup!” and it should be opened!
Hello, this is also happening to me after upgrading to Storybook 6.1.2.
Problem:
@storybook/coreaddsbabel-loader@8.2.1as a devDependency. This version clashes with CRA2’s expected version, which is 8.1.0.Easy way to reproduce:
More proof:
Is this recommended? The error message provided (see OP) specifically says
@mrmckeb thanks for the reply. Adding the
babel-loaderdependency is exactly what thesb initstep is doing. It’s not an explicit dependency of the app before that point, but is a sub-dependency ofreact-scripts.I’m getting this with
react-scripts@3.4.4andstorybook@6.1.16In my package.json I’ve got:
I’m stuck in this issue right now… CRA + TS…
ERR! Error: Cannot find module ‘babel-loader’
If I install the babel-loader my React App brokes
Any fix? Any help?
The error message pretty much says it all - either you don’t install
babel-loaderexplicitly or you pin it explicitly to v8.1.0. For compatibility reasons it looks more reasonable to not install it explicitly and always use the one that comes with CRA, since you will have an easier time updating it.Unfortunately, that didn’t change anything. Trying both
npx sb@next upgradeand a fresh install withnpx sb@next initboth resolve in the same issue, babel-loader 8.2.2 is bundled by storybook.closing as dupe to #4764