Add instructions for installing with PNPM to the Get Started Install section

[Mr-LJQ]

Yesterday, I tried to start using Storybook, after going through the official documentation, I followed the documentation instructions to install, but this installation caused me to spend a whole day. Although the installation instructions only provide how to install NPM and YARN, there is no explicit instruction that PNPM cannot be used, so I use PNPM installation, but this causes some dependency problems.

pnpx storybook init
../../.pnpm-store/v3/tmp/dlx-3496        |  WARN  deprecated [email protected]
 WARN  GET https://registry.npmmirror.com/prettier/-/prettier-2.3.0.tgz error (ECONNRESET). Will retry in 10 seconds. 2 retries left.
../../.pnpm-store/v3/tmp/dlx-3496        |  WARN  deprecated [email protected]
../../.pnpm-store/v3/tmp/dlx-3496        |  WARN  deprecated [email protected]
../../.pnpm-store/v3/tmp/dlx-3496        |  WARN  deprecated [email protected]
../../.pnpm-store/v3/tmp/dlx-3496        |  WARN  deprecated [email protected]
../../.pnpm-store/v3/tmp/dlx-3496        |  WARN  deprecated [email protected]
../../.pnpm-store/v3/tmp/dlx-3496        |  WARN  deprecated [email protected]
../../.pnpm-store/v3/tmp/dlx-3496        | +882 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: D:\.pnpm-store\v3
  Virtual store is at:             ../../.pnpm-store/v3/tmp/dlx-3496/node_modules/.pnpm
 WARN  GET https://registry.npmmirror.com/prettier/-/prettier-2.3.0.tgz error (ECONNRESET). Will retry in 1 minute. 1 retries left.
../../.pnpm-store/v3/tmp/dlx-3496        | Progress: resolved 885, reused 404, downloaded 479, added 882, done
../../.pnpm-store/v3/tmp/dlx-3496/node_modules/.pnpm/[email protected]/node_modules/core-js: Running postinstall script, done in 284m
s
 WARN  Issues with peer dependencies found
.
└─┬ storybook 6.5.10
  └─┬ @storybook/cli 6.5.10
    └─┬ @storybook/core-common 6.5.10
      ├── ✕ missing peer typescript@"*"
      ├── ✕ missing peer react@"^16.8.0 || ^17.0.0 || ^18.0.0"
      ├── ✕ missing peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0"
      └─┬ fork-ts-checker-webpack-plugin 6.5.2
        └── ✕ missing peer typescript@">= 2.7"
Peer dependencies that should be installed:
  react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0"  react@"^16.8.0 || ^17.0.0 || ^18.0.0"      typescript@>=2.7.0

The integrity of 3337 files was checked. This might have caused installation to take longer.

 storybook init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
 • Adding Storybook support to your "Webpack React" app

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:./scripts/eslint-plugin

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2022-08-25T16_27_14_185Z-debug-0.log
An error occurred while installing dependencies.

 ERROR  Command failed with exit code 1: D:\.pnpm-store\v3\tmp\dlx-3496\node_modules\.bin\storybook.CMD init

pnpm: Command failed with exit code 1: D:\.pnpm-store\v3\tmp\dlx-3496\node_modules\.bin\storybook.CMD init
    at makeError (C:\Users\Administrator\AppData\Local\pnpm\global\5\.pnpm\r[email protected]\node_modules\pnpm\dist\pnpm.cjs:22289:17)
    at handlePromise (C:\Users\Administrator\AppData\Local\pnpm\global\5\.pnpm\r[email protected]\node_modules\pnpm\dist\pnpm.cjs:22860:33
)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.handler [as dlx] (C:\Users\Administrator\AppData\Local\pnpm\global\5\.pnpm\r[email protected]\node_modules\pnpm\dist\p
npm.cjs:191714:7)
    at async C:\Users\Administrator\AppData\Local\pnpm\global\5\.pnpm\r[email protected]\node_modules\pnpm\dist\pnpm.cjs:199078:21
    at async run (C:\Users\Administrator\AppData\Local\pnpm\global\5\.pnpm\r[email protected]\node_modules\pnpm\dist\pnpm.cjs:199049:34)
    at async runPnpm (C:\Users\Administrator\AppData\Local\pnpm\global\5\.pnpm\r[email protected]\node_modules\pnpm\dist\pnpm.cjs:199270:5
)
    at async C:\Users\Administrator\AppData\Local\pnpm\global\5\.pnpm\r[email protected]\node_modules\pnpm\dist\pnpm.cjs:199262:7

In order to solve this problem, I spent a lot of time searching for information and trying one by one. The problem was finally solved in the following way.

echo shamefully-hoist=true> .npmrc 
pnpx storybook init -s 
pnpx install 

The reason this is a bad problem is that when the npx storybook init goes wrong, I want to be able to manually install the dependencies, but there's no instructions for what to install, so I can just work around it and figure out what packages to install after the npx storybook init, Then go to manual installation. There are other problems with this process, such as the lack of documentation for npx storybook Init that explains what commands and options it has, which makes me really upset.

The essence of the problem is that the documentation says' npx storybook init 'is the easiest way to install it, but when it crashes, you'll find that there's no way to go back from' npx storybook init 'to' PNPM add... `.

Therefore, I feel that in addition to the smart installation method of "npx storybook init", I should add the manual "npm/pnpm add...". Installation method.You should also add a description of the problems that can result from installing with PNPM.

May no one waste their life like I did.