storybookをinstallした際のvulnerabiltiesの解消log

問題

storybookを導入する際に、npx sb initでプロジェクトをセットアップしようとするがpackageをインストールし終わった段階で26 vulnerabilities (8 moderate, 16 high, 2 critical)出てしまう。

Kyosuke Kubo

環境

node -v
v16.3.0

npm -v
8.0.0

react version( use create-react-app)
^17.0.2

Kyosuke Kubo

storybookたち

"@storybook/addon-docs": "^6.2.2",
"@storybook/addon-essentials": "^6.1.21",
"@storybook/react": "^6.1.21",

Kyosuke Kubo

試したこと

npm audit fix
npm audit fix --force
npx sb@latest init
npx sb@next init

npm i -g @storybook/cli@latest
npx sb init

Kyosuke Kubo

--legacy-peer-depsもつけて上記コマンド実行してみたりした

Kyosuke Kubo

目ぼしいissueもなさそう

Kyosuke Kubo

推測込みだが、reactとstorybookの相性？（バージョン）が良くなさそう

Kyosuke Kubo

そもそもnpm auditしたら、storybookの依存パッケージの部分で問題が起きているので、直接直すのは該当ライブラリにcontributeするしかなさそう。

なので、依存pkgのバージョンをどうやったら操作できるかを考える。

Kyosuke Kubo

resolutionsを指定することでできそう

Kyosuke Kubo

下記記事にもあるとおりyarnでしか標準でできない機能になっているが、package.jsonに追記してみる。

"resolutions": {
    "ansi-regex": "5.0.1",
    "nth-check": "2.0.1",
    "trim": "0.0.3",
    "browserslist": "4.16.5",
    "glob-parent": "5.1.2",
    "immer": "9.0.6"
  }

Kyosuke Kubo

yarn auditすると、自分の場合はresolutionで治った。
しかし、ansi-htmlだけ依然highで残っている。

Kyosuke Kubo

npm もありそう

Kyosuke Kubo

react-scriptsの問題なので、react-scriptsをyarn removeしたら0にできた。

現時点で考えられるベストプラクティスはcreate-react-appではなく、

全部手動で構築させたのちに
手動で@storybook/react,@storybook/vulnerabilitiesでstorybookを構築
resolutionsで深い依存のpackageのversionを設定
npmの場合はpkgを使ってpackageのversionを設定（未検証）
react-scriptsがある場合はremove(uninstall)

↑こんな感じ？？まあまあ無理くり感あるが、auditの結果を健全にできる方法ではある。

Kyosuke Kubo

とはいえnpmでも検証してみる価値ありそう

Kyosuke Kubo

一応再検証projectはyarnで、create-react-app使ってstorybookの導入を試みた

Kyosuke Kubo

npmでも検証したらできたので終了