2021/05/16
はじめに
Gatsby+Typescriptでブログを開設したのだが，まだまだ構築完了には程遠い．
今回は，Gatsby-Starter-Blog-Typescriptで準備したブログのテンプレート（？）で発生した警告を解消する方法を記す．
エラー全文
ブラウザのコンソールに以下の警告が出力された．
react-dom.development.js:89 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: SideEffect(NullComponent)
printWarning @ react-dom.development.js:89
まず考えたこと
使っているReactのバージョンで非推奨なことを行っているパッケージがありそう．
原因となるパッケージが特定できれば，
- 該当パッケージを更新
- 代替パッケージに移行 のどちらかの対処で済みそうだ．
調査
取り敢えず，gatsby Warning: componentWillMount has been renamedでググったところ，おなじエラーに直面した人が大勢いるようだ．
それらを見る限りだと，react-helmetパッケージが原因である可能性があるということ．
警告が出た時点でのパッケージバージョンは以下．
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.0",
解消方法としては，react-helmetの代わりにreact-helmet-anyncを使うと良いとのこと．
これで解決できそうではあるが，(できるだけコード変えたくない・・・)もう少し楽に出来ないかと考え，
react-helmetのnpmページを見たところ，6系が最新版だった．
そこで，react-helmet-asyncに移行する前の悪あがきとしてnpm install react-helmet@6をした．
その結果，警告が無事消えた．
その時のバージョンは以下．
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-helmet": "^6.1.0",
おわりに
依存パッケージのバージョンが更新されるごとに色んな不具合があるものですね！
今回は，パッケージ移行しなくて済んだので，非常に助かりました．
また，react-helmetの6系であってもUNSAFE_componentWillMount in strict mode is ...という警告が出力されたという方もいるので，
更新しても解消しない場合は，react-helmet-asyncに移行したほうが良いかもしれません．
あと，Reactのバージョンも古いものも使っていたので，Warning解消後についでに更新しちゃいました！