この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
とあるプロジェクトでは、次のような状態になっていました。
- 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 を削除して再インストール
おまけ
作業中に、あるはずの型が存在していないことに気づきました。
定義漏れだったようなので追加するコントリビュートをしました?
12
