create-react-appしたReact v16をv17へアップグレードする方法

1 min read読了の目安(約900字

どうせバージョンアップするなら早いほうが良い。
そう思ってReactをv16からv17にアップグレードしたら色々躓いたので記録。

yarn upgrade -interactive --latest

このコマンドで最新版へアップグレードしたいモジュールを選択して更新できる。
react、react-dom、react-script を選択すればOK
あと @typescript-eslint、eslint、prettier 辺りも最新版にしよう。じゃないとReactからESLintのバージョンを7にしろと怒られる。

そのあと
yarn add -D @types/react
で型をインストールすればOK。(-Dはビルドパッケージに含めなくていいから入れる。)


上記作業の理由

ESLint v7で規則が追加された様です。
yarn add -D @types/react
をしていないと下記のエラーが出てきます。

Could not find a declaration file for module ‘react’. ‘/Users/username/projects/project-name/node_modules/react/index.js’ implicitly has an ‘any’ type.
If the ‘react’ package actually exposes this module, consider sending a pull request to amend ’https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/type

やっぱりESLintが環境構築の障害要因になっていました。
(なんか前もESLintのお陰で環境構築に時間がかかってた気がする・・・)

これでとりあえず、v16で作ったものであればビルドが通るようになるはず。
Reactはあまり問題がなかったようだけど、ESLintが結構厄介なのは多分これからも続くだろうな・・・。