Rechart v1 が使用されている運用中プロジェクトでの Aliases を使った v2 への 段階的移行

Recharts v1 が使用されている運用中プロジェクトでの v2 への 段階的移行。
2022.12.18

とあるプロジェクトでは、次のような状態になっていました。

  • Recharts は v1
  • React は v18
  • @types/react は v17

React と @types/react のバージョンが異なってしまった原因の 1 つとして、Rechart v1 が React 18 に対応していないことが含まれているようでした。

規模として小さいとは言えないプロジェクトの複数箇所で Rechart が使用されており、かつ 1 週間スプリントのスクラムだったため、一気にアップデートを行うのではなく段階的に Recharts をアップデートすることにしました。PR も小さくなるのでレビュワーに優しいですね。

Aliases を使って Rechart を v1 と v2 で共存させる

Aliases を使うことで複数の package をインストールすることができるため、ライブラリの段階的なアップデートができます。

# npm
npm i <alias>@npm:<package-name>

# pnpm
pnpm add <alias>@npm:<package-name>

# yarn v1
yarn add <alias>@npm:<package-name>

実際には yarn v1 を使用していたため、叩いたコマンドは次になります。

yarn add recharts-v2@npm:recharts

これで import { Line } from 'recharts-v2'; のように recharts-v2 を import 元にすると Rechart v2 を使用できるようになりました。

v1 から v2 へ置き換える

Tooltip や Label で多少複雑なことをしてはいたのですが、基本的に型を合わせていけば問題なく移行できました。デフォルトでの挙動がいくつか変わっている箇所があるので、その点は少し注意が必要になるかもしれません。実際に描画されるグラフを前のバージョンのものと見比べることを忘れないようにしましょう。

実際の置き換え作業は次のように 3 スプリントかけて段階的に行いました。

  • 最初のスプリント: グラフを 1 箇所置き換える、共通化されているコンポーネントは v1 と v2 に分離
  • 次のスプリント: 他のグラフへ 1 箇所ずつ横展開
  • 最後のスプリント: Rechart v1 の削除、v2 の Aliases を削除して再インストール

おまけ

作業中に、あるはずの型が存在していないことに気づきました。

定義漏れだったようなので追加するコントリビュートをしました🎉