こんにちは、はるです。
所属している「もりけん塾」でReact課題に取り組んでいます。
今回は少し脱線しますが、パッケージの依存関係の警告と向き合った記録です。
結果的にreact-scriptsをViteに置き換える対応を取りました。
react-scriptsはすでに非推奨のものなので、なかなか同じ警告や対応をすることはないと思うのですが、警告文をどのように読んで、関連の文書をどのように調べ、実際にどうやって解消していくかを学ぶことができたので大変勉強になりました。
初心者の学習ノートなので、認識の間違えている点がありましたらお問い合わせからご指摘いただけるとうれしいです。
経緯
もりけん塾のReact課題では、react-scriptsというパッケージのCreate React Appを使って環境構築を行っていました。（これは現在は非推奨のものですが、課題の特性上、簡単に環境構築を行い、React課題に集中するため採用されている）
課題の中で、Tanstack Queryをインストールしようとしたところ
npm install @tanstack/react-query依存関係の警告が……..
10 vulnerabilities (1 low, 3 moderate, 6 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force132 vulnerabilities ...1行目にある、1 low, 3 moderate, 6 highが脆弱性のグレードです。
中でも、highやcriticalは早急に対応したほうが良いとのことで、今回はこれと向き合うことにしました。
npm audit
npm auditで脆弱性の詳細を見ることができます。
赤枠の中を見てみると、「nth-check」というパッケージのバージョンが2.0.1未満の場合は、重大な脆弱性があることがわかります。
続いて下記のようにあります。
Will install react-scripts@3.0.1,
脆弱性の修正のために npm audit fix –force というコマンドを使い、react-scripts@3.0.1へダウングレードできるとあります。
しかし、この変更によって他の依存関係に影響があるかもしれないとも書かれていました。
Issueやドキュメントを確認
ダウングレード、アップグレードなどをして既存のパッケージの脆弱性を解決していくのか？
他の代替手段に移行するのか？
など、対応を選ぶためにIssueやAdvisoryなどの情報を確認していきます。
今回は2つのIssueを主に確認しましたが、どちらもreact-scriptsのリポジトリのものです。
react-scriptsで使っているsemverにも脆弱性がある
react-scriptsはnth-checkだけでなく、semver@6.3.0にも脆弱性があることがわかりました。
ここで、semverの脆弱性についてGitHub Advisory Database で調べてみました。
「semver パッケージの 7.x ブランチの 7.5.2 より前のバージョン、6.x ブランチの 6.3.1 より前のバージョン、および 5.7.2 より前の他のすべてのバージョンには、信頼されていないユーザデータが範囲として提供された場合、関数 new Range を経由した正規表現サービス拒否 (ReDoS) の脆弱性があります。」とありました。👀
react-scriptsの依存関係のnth-checkに対する脆弱性
別のIssueによると、「react-scriptsを最新にしたところ、nth-checkの脆弱性の警告が出た。手動で解決を試みたが、警告が出続けている」といった内容でした。
「CRA 開発者は脆弱性を気にせず、それを修正するために何もしません。気になる場合は、CRA の使用を中止してください。 CRA は公式には、React アプリを作成するための推奨プロジェクトではなくなりました。他のものを使用してください。CRA との 1 対 1 に近いエクスペリエンスが必要な場合は、Vite を使用してください。」といった記述がありました。
以上のことから、バージョンを下げてreact-scriptsを使い続けるよりも、Viteへ移行した方が良いと判断しました。
Viteへの移行
移行は下記の記事に沿って行ったので、手順は割愛します。
Viteを追加し、react-scriptsはuninstall。
最後にインストールしたかったTanstack Queryを追加しましたが、依存関係の警告は何も出ませんでした🥳
メジャー・マイナーアップデート
npm-check-updates
- ライブラリ一つ一つドキュメントも確認
- 上がったことで何が影響受けるか
- テストは通っているか
- 使っている箇所はうまく動くか
ncu -u --target patchでpacthバージョンだけ上げるときに使っているとお聞きしました。patchバージョン
まとめ
今回の対応を通じて、警告文の読み方や、Issue,Advisoryで情報を調べること、実際の対応の仕方を学ぶことができました。
1つのパッケージを移行やアップグレードするために、きちんと裏付けとなる情報を調べた上で影響を確認しながら行っていくことを知りました。
ただ、今回は判断の材料になるissueをもりけんさんがくださっていたので、今後自分でも調べていけるようになりたい…✏️
今回は書いていないけど、Viteへの移行の際にAST変換についても詳しく調べることができて最初から最後までとても勉強になりました。
何度もアドバイスしてくださったもりけんさん(@terrace_tec）ありがとうございました！
–
💡もりけん塾で勉強しています .. JavaScriptを一緒に勉強する塾生さんを募集中です💡
もりけんさん(@terrace_tec)のHPはこちら
