Open2023/03/18にコメント追加1

YarnのWarningを解決する

中田

概要

huskyでpush時にnpmパッケージのアップデートを自動化したい
アップデートした時warningが出力されてエラー判定になりpushできない
yarnのwarningを解決する

動作環境

macOS: 13.2.1(M1)
yarn 3.3.1
husky: 8.0.0

対象読者

yarnのwarningがきになる
or
個人開発プロジェクト向け
huskyを使っている
開発用パッケージのdependabotのマージめんどくさい

きっかけ

テスト通ってりゃOKビルドできてりゃOK系のdependabotのPRでいちいちrebaseすんのめんどいなあvercelのビルド走るのもったいないなあ・・せや！huskyでpush時についでにアップグレードしたろ！

package.json

  "scripts": {
    + "upgrade:linter": "yarn up 'eslint*'",
    + "upgrade:types": "yarn up '@types/*' '*typescript*'",
    + "upgrade:storybook": "yarn up '@storybook*"
  },

参考：https://yarnpkg.com/cli/up

.husky/pre-push

+ yarn upgrade:linter
+ yarn upgrade:types
+ yarn upgrade:storybook

push

warningで止まるのね〜

warningが出ないようにする

yarnのwariningのコード`YN0002`を解決

The author of project can fix this problem by manually overriding the packageA and/or packageB definitions via the packageExtensions config option.

意訳：パッケージの作者が依存関係を設定する以外にも、プロジェクトの作者が設定したり手動で依存パッケージを入れたら解決できるよ

package.jsonに依存の依存入れるのごちゃごちゃして嫌なのでpackageExtensions設定をすることにした

このwarningに対処する

warningメッセージ

➤ YN0002: │ portfolio@workspace:. doesn't provide webpack (p019d0), requested by babel-loader

まずup時のメッセージの最後にも書いてある通りに

打つコマンド

yarn explain peer-requirements p019d0

としたら依存パッケージのどのバージョンが求められてるのか出てくるので
参考：https://yarnpkg.com/cli/explain/peer-requirements

yarn explain peer-requirements p019d0      
➤ YN0000: portfolio@workspace:. doesn't provide webpack, breaking the following requirements:

➤ YN0000: babel-loader@npm:9.1.2 [3786d] → >=5 ✘

それを下のように書く

.yarnrc.yml

packageExtensions:
  'babel-loader@^9.1.2':
    dependencies:
      webpack: '>=5'

これを全部のYN0002に対して行う

設定するパッケージのバージョンは semver rangeで記述するとのこと
@workspace:. doesn't provide ~のものはdependencies:
パッケージ名 doesn't provide~のものはpeerDependencies:

最終的な内容

.yarnrc.yml

packageExtensions:
  '@formspree/react@^2.4.1':
    peerDependencies:
      react: '^18.0.0'
      react-dom: '^18.0.0'
  '@storybook/addon-postcss@^2.0.0':
    dependencies:
      webpack: '^5.0.0'
  'stailwc@^0.15.0':
    dependencies:
      '@emotion/serialize': '^1.1.1'
  'styled-components@^5.3.6':
    dependencies:
      'react-is': '>= 16.8.0'
  'babel-loader@^9.1.2':
    dependencies:
      webpack: '>=5'

YN0002エラーが消えた🤗

結構めんどいです。自動生成するコマンドは用意されていないんだろうか

yarnのwariningのコード`YN0060`を解決

意訳：依存パッケージは入ってるんやけどバージョンが求めてるのと違う

explainしてもらうと、

➤ YN0000: portfolio@workspace:. provides react-i18next@npm:12.1.5 [3786d] with version 12.1.5, which doesn't satisfy the following requirements:

➤ YN0000: next-i18next@npm:13.2.1 [3786d] → ^12.2.0 ✘

12.1.5が入ってるけど12.2.0を求めてます!

ふつうにaddしたら求められているバージョンになりました

yarn add react-i18next

YN0060エラーが消えた🤗
ここまで解決したら残りwarningも一緒に解決したようです!!!!!

再度push

えーなんでなん

しらみ潰した結果、コマンドを書き間違えていたせいであることがわかりました。えへへ

json

- "upgrade:storybook": "yarn up '@storybook"
+ "upgrade:storybook": "yarn up '*storybook*'"

※冒頭のコードは修正済み

ベータ版のupgrade

別問題としてstorybookはベータ版を入れてるので普通にupすると安定版の最新が入ってしまう
storybookは専用のアップグレードコマンドがあるので入れ替えました

json

- "upgrade:storybook": "yarn up '*storybook*'",
+ "upgrade:storybook": "npx storybook@next upgrade --prerelease"

参考： https://chromatic-ui.notion.site/Storybook-7-migration-guide-dbf41fa347304eb2a5e9c69b34503937

こんな一気にしかもpush時にいつもアップデートすると問題が起きた時に切り分けが難しくなりそうですが、
テストやビルドもpush時にしているのでpush前には気づけて急いでればhuskyからコマンドを一旦消すとかの運用にします（チームだとこんなんあかんかもですがこれをするプロジェクトは個人プロジェクトの想定）
ジャンルごとでコマンドを分けたのでその切り替えで特定したらいいかなと思っています

package.jsonもだれかにlintしてほしいなあ
あとymlファイル書くの辛いなあ
-> 次はこれらをどうにかしたいなあ

概要