For a project requirement, I am configuring storybook 5.3 for react component development. I am using Yarn version 2 as the package manager.I've done all the steps mentioned in the storybook tutorial. but when starting the storybook using 'yarn storybook', it's showing below error. The same thing is working fine if I switch to npm. After reading some docs on 'yarn' I am assuming(maybe wrong) this is happening because of 'Plug'n'Play feature of Yarn. So any thoughts on how to fix this?.
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
@ multi ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-1.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true main[0]
ERROR in multi ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-1.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
@ multi ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-1.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true main[1]
ERROR in multi ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-1.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
@ multi ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-1.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true main[3]
ERROR in multi ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-1.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
@ multi ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/common/polyfills.js ./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js ./.yarn/cache/webpack-hot-middleware-npm-2.25.0-b59f3763d7-1.zip/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true main[2]
ERROR in Error: Child compilation failed:
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox':
Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox':
Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
- compiler.js:141
[html-webpack-plugin-npm-4.0.0-beta.5-9fc0a86688-1.zip]/[html-webpack-plugin]/lib/compiler.js:141:18
- Compiler.js:343
[webpack-npm-4.41.5-ec6f53e9d3-1.zip]/[webpack]/lib/Compiler.js:343:11
- Compiler.js:681
[webpack-npm-4.41.5-ec6f53e9d3-1.zip]/[webpack]/lib/Compiler.js:681:15
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[tapable-npm-1.1.3-f1c2843426-1.zip]/[tapable]/lib/Hook.js:154:20
- Compiler.js:678
[webpack-npm-4.41.5-ec6f53e9d3-1.zip]/[webpack]/lib/Compiler.js:678:31
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[tapable-npm-1.1.3-f1c2843426-1.zip]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1423
[webpack-npm-4.41.5-ec6f53e9d3-1.zip]/[webpack]/lib/Compilation.js:1423:35
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[tapable-npm-1.1.3-f1c2843426-1.zip]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1414
[webpack-npm-4.41.5-ec6f53e9d3-1.zip]/[webpack]/lib/Compilation.js:1414:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[tapable-npm-1.1.3-f1c2843426-1.zip]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1409
[webpack-npm-4.41.5-ec6f53e9d3-1.zip]/[webpack]/lib/Compilation.js:1409:36
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 536 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./.yarn/$$virtual/html-webpack-plugin-virtual-8c0fe702c5/0/cache/html-webpack-plugin-npm-4.0.0-beta.5-9fc0a86688-1.zip/node_modules/html-webpack-plugin/lib/loader.js!./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/templates/index.ejs] 2.15 KiB {HtmlWebpackPlugin_0} [built]
[./.yarn/cache/lodash-npm-4.17.15-566d9324f7-1.zip/node_modules/lodash/lodash.js] 528 KiB {HtmlWebpackPlugin_0} [built]
ERROR in ./.yarn/cache/lodash-npm-4.17.15-566d9324f7-1.zip/node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
@ ./.yarn/cache/lodash-npm-4.17.15-566d9324f7-1.zip/node_modules/lodash/lodash.js 1:0-96
@ ./.yarn/$$virtual/html-webpack-plugin-virtual-8c0fe702c5/0/cache/html-webpack-plugin-npm-4.0.0-beta.5-9fc0a86688-1.zip/node_modules/html-webpack-plugin/lib/loader.js!./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/templates/index.ejs
ERROR in ./.yarn/cache/lodash-npm-4.17.15-566d9324f7-1.zip/node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/vimal/HDD/Development/Design/testspace/taskbox'
@ ./.yarn/cache/lodash-npm-4.17.15-566d9324f7-1.zip/node_modules/lodash/lodash.js 1:0-96
@ ./.yarn/$$virtual/html-webpack-plugin-virtual-8c0fe702c5/0/cache/html-webpack-plugin-npm-4.0.0-beta.5-9fc0a86688-1.zip/node_modules/html-webpack-plugin/lib/loader.js!./.yarn/$$virtual/@storybook-core-virtual-3f1196b7f0/0/cache/@storybook-core-npm-5.3.9-d2e9ade828-1.zip/node_modules/@storybook/core/dist/server/templates/index.ejs
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
package.json looks like below
{
"name": "Sbook",
"scripts": {
"storybook": "start-storybook"
},
"devDependencies": {
"@babel/core": "^7.8.3",
"@storybook/react": "^5.3.9",
"babel-loader": "^8.0.6"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
This is actually caused because Storybook doesn't support Yarn 2 on versions older than v6.0.0 (still alpha at the time of this writing).
There is an issue regarding the status of supporting Yarn 2 here
I think the main issue here is that Yarn community rushed declaring Yarn 2 as stable version enforcing a very strict dependency resolution without a loose alternative leaving no time & space for the JS ecosystem to adjust.
Here is a test repo containing a step-by-step guide of the actions you need to take to install storybook with yarn 2. As a viable alternative that supports PnP and has similar CLI to NPM I would suggest PNPM