Storybook 5.3 issue with yarn version 2

Question

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

Are you using yarn workspaces and/or have your storybook project nested inside another project? I used to have a similar issue with lerna + yarn workspaces. — eMontielG, Jan 29 '20 at 23:28

dimitrisk · Accepted Answer · 2020-04-15T10:35:42.747

-1

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

edited Apr 15 '20 at 10:35

answered Apr 15 '20 at 10:10

dimitrisk

774
9
15

This has nothing to do with Yarn 2. I have Yarn 1.22 and it's working fine before and after version 6 of Storybook. This is more likely to happen if you have two competing versions of babel-loader as I did. Storybook 6 was pulling in babel-loader as was react-scripts but they were differing version. I tried adding the version of babel-loader pulled in by Storybook 6 to the dependency resolutions but that didn't do much. Ported my craco/react-script to webpack and that fixed it. – Jason Rice Nov 06 '20 at 22:59

Storybook 5.3 issue with yarn version 2

1 Answers1