Как решить проблему при установке Storybook для Webpack?

Question

[DZHAMBUALT]

Здрасте. Столкнулся с проблемой при установке Storybook. Нашел статью (кстати вот она https://storybook.js.org/blog/storybook-for-webpack-5/) где человек написал что для webpack 5 нужно выполнить команду npx sb init --builder webpack5. Я её написал, установка вроде проходит, но затем вылазит это

npx sb init --builder webpack5
╭───────────────────────────────────────────────────────╮
│                                                       │
│   Adding Storybook version 8.1.11 to your project..   │
│                                                       │
╰───────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...


up to date, audited 1161 packages in 3s

224 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 • Adding Storybook support to your "Webpack React" app
  ⠙ Getting the correct version of 11 packages
     Error: Command failed with exit code 3221225477: npm info @storybook/react version --json
    at makeError (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\execa\lib\error.js:60:11)
    at handlePromise (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\execa\index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async NPMProxy.executeCommand (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\@storybook\core-common\dist\index.js:35:1948)
    at async NPMProxy.runGetVersions (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\@storybook\core-common\dist\index.js:37:417)
    at async C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\@storybook\core-common\dist\index.js:33:796
    at async Promise.all (index 1)
    at async baseGenerator (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\@storybook\cli\dist\generate.js:96:677)
    at async generator8 (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\@storybook\cli\dist\generate.js:133:1267)
    at async installStorybook (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\d28cfb4b54958d89\node_modules\@storybook\cli\dist\generate.js:145:4834)
  ⠸ Getting the correct version of 11 packages

и storybook не ставится. Что делать чтобы это решить : \

Answer 1

[Антон Горецкий]

статья 21 года, за 3 года многое изменилось. Используйте:
npx storybook@latest init
там будут предложены возможные варианты во время установки

Comments

[DZHAMBUALT]

Мне это не помогло после ввода npx storybook@latest init я выбираю Webpack 5, но ошибка зараза снова вылетает

npx storybook@latest init
╭───────────────────────────────────────────────────────╮
│                                                       │
│   Adding Storybook version 8.1.11 to your project..   │
│                                                       │
╰───────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...


up to date, audited 1161 packages in 3s

224 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
√
We were not able to detect the right builder for your project. Please select one: » Webpack 5

  ⠙ Getting the correct version of 11 packages
     Error: Command failed with exit code 3221225477: npm info @storybook/react-webpack5 version --json
    at makeError (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\execa\lib\error.js:60:11)
    at handlePromise (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\execa\index.js:118:26)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async NPMProxy.executeCommand (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\core-common\dist\index.js:35:1948)
    at async NPMProxy.runGetVersions (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\core-common\dist\index.js:37:417)
    at async C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\core-common\dist\index.js:33:796
    at async Promise.all (index 2)
    at async baseGenerator (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:96:677)
    at async generator8 (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:133:1267)
    at async installStorybook (C:\Users\Джамбулат\AppData\Local\npm-cache\_npx\bc7e1e37fcb46ffc\node_modules\@storybook\cli\dist\generate.js:145:4834)
  ⠼ Getting the correct version of 11 packages

[Антон Горецкий]

DZHAMBUALT, возможно, это баг. Какая ОС и версия Node.js?

[DZHAMBUALT]

Короче в я потратил кучу времени чтобы понять что проблема не в самом storybook а проблема в кэше npm. Я наткнулся на этот вопрос (https://stackoverflow.com/questions/42308879/how-t...) и решил попробовать ввести команду npm cache clean --force после чего снова написал npx storybook@latest init и о чудо оно ожило. Короче зря потраченное время из-за кэша \: