2

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

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

1 回答 1

-1

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

这里有关于支持 Yarn 2 的状态的问题

我认为这里的主要问题是 Yarn 社区匆忙宣布 Yarn 2 为稳定版本，强制执行非常严格的依赖解决方案，没有松散的替代方案，没有时间和空间让 JS 生态系统进行调整。

这是一个测试存储库，其中包含使用纱线 2 安装故事书所需采取的操作的分步指南。作为支持 PnP 并具有与 NPM 类似的 CLI 的可行替代方案，我建议使用 PNPM

于 2020-04-15T10:10:45.877 回答