プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

ReactのアプリでLegacy context API~とWarningが出る場合の対処方法

事象

久しぶりにReactアプリをcreate-react-appで書いていると、なにやら気になるwarningがコンソールに出力されるようになりました。

その内容はこちら

index.js:1 Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Transition

簡単に書くと、従来のレガシーコンテキストが使われてるから、今は動くけど
それは今後削除される予定のものだよ。

って感じの文字通り、注意でした。

ただ問題なのが、そのエラーを吐いてるのがどうやら読み込んだパッケージ側で起きているということ。

動作には影響しないので放置してもいいんだけど、開発者モードで開くと毎度真っ赤な文字がでてくるのが気になってしまいます。。

対策

packege.jsonの中の各パッケージのバージョンを変えたりいろいろしてましたが、解消されず。結局「index.js」に今までのcreate-react-appでは生成されていなかった箇所があるのを見つけ、それを削除しました。

その箇所がこちら

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

上記を、以前の自動生成で出来上がるindex.jsの頃に戻してあげる。

ReactDOM.render(<App />, document.getElementById('root'));

React.StrictModeを消しただけですね。

これで無事真っ赤なwarningは表示されなくなりました。

根本の解決がしていないのですが、npmでインストールしたパッケージ側がまだ対応してなくてでているエラーなので…ひとまず仕方ないよねってことで。