纱线版本 2 的故事书 5.3 问题

Question

由于项目需求，我正在配置storybook 5.3 用于react 组件开发。我正在使用 Yarn 版本 2 作为包 manager.I 完成了故事书 tutorial 中提到的所有步骤。但是当使用 'yarn storybook' 启动故事书时，它显示以下错误。如果我切换到 npm，同样的事情也能正常工作。在阅读 'yarn' 上的一些文档后，我假设（可能是错误的）这是由于 Yarn 的“即插即用”功能而发生的。那么关于如何解决这个问题有什么想法吗？

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 如下所示

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

Answer 1

这实际上是因为 Storybook 在早于 v6.0.0 的版本上不支持 Yarn 2（在撰写本文时仍为 alpha）。

支持 Yarn 2 的状态存在问题here

我认为这里的主要问题是 Yarn 社区急于宣布 Yarn 2 为稳定版本，执行非常严格的依赖项解决方案，没有松散的替代方案，没有时间 & space 来调整 JS 生态系统。

Here is a test repo 包含使用 yarn 2 安装故事书所需采取的操作的分步指南。作为支持 PnP 并具有与 NPM 类似的 CLI 的可行替代方案，我建议使用 PNPM

纱线版本 2 的故事书 5.3 问题

Storybook 5.3 issue with yarn version 2

reactjs

yarnpkg

storybook

yarnpkg-v2