今回の投稿は(エラーの表示を一旦なくすために使用した)
Reactのダウングレードの仕方についてメモしたものになります。
ダウングレードの方法は(2)に記載しておりますので飛ばしていただいて構いません。
※ エラーについては根本的な解決には至ってないのかもしれませんのでご了承ください
※ エラー内容についても自分用にメモとして残しております。
(1)どういったエラーか
Next.jsとmicrocmsを使用してのブログを作成後、デプロイした際の以下の3つのエラーが起きました。
三つのエラーを見ていきます。
左から(エラーの中身と日本語訳[DeepL使用])
①https://reactjs.org/docs/error-decoder.html/?invariant=425
「Text content does not match server-rendered HTML.」
訳: テキストコンテンツがサーバーでレンダリングされたHTMLと一致しない。
②https://reactjs.org/docs/error-decoder.html/?invariant=418
「Hydration failed because the initial UI does not match what was rendered on the server.」
訳: 初期UIがサーバーでレンダリングされたものと一致しないため、Hydrationに失敗しました。
③https://reactjs.org/docs/error-decoder.html/?invariant=423
「There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.」
訳: ハイドレーション中にエラーが発生しました。このエラーはサスペンス境界の外側で発生したため、ルート全体がクライアントレンダリングに切り替わります。
(2)エラーを無くした方法(ダウングレード方法)
色々とコードを見直したり、書き換えたりしましたがエラーはなくならず、、、
「もしかしたらReact18に原因があるのでは？」と考えダウングレードすることにしました。
①package.jsonの記述を変更
[変更前]
"react": "18.0.0",
"react-dom": "18.0.0",
[変更後]
"react": "^17.0.2",
"react-dom": "^17.0.2",
②インストール
npm install --save react@17.0.2 react-dom@17.0.2
※ ちなみにですがnpm 5.0.0以降からは"--save"の記述はいらないようです
再びデプロイするとエラーの表示は一旦なくなりました。
(3)まとめ
エラー表示は一旦なくなりましたが、下の記事にあるように根本的な解決には至ってないのかもしれないと考えてます。
具体的に良い解決策が見つかりましたらそちらも投稿しようと思います。