Closed5
React18 x Next.jsで発生するHydration failedを解決する
mu-sukeゴール
- タイトルの通り
課題点
- 下記の記事を読んだが問題が解決しなかった
- 原因発生原因がわかっていない
環境
| ツール・ライブラリ | 用途 | バージョン |
|---|---|---|
| Next.js | フロントエンドとして利用 | 12.1.6 |
| NestJS | サーバーサイドとして利用 | 8.0.0 |
| GraphQL Code Generator | コード自動生成ツール | 2.6.2 |
| URQL | GraphQL Clientのライブラリ | 2.2.0 |
| node.js | フロント、サーバーサイドの実行環境 | v16.14.0 |
mu-suke上のurlと同じ回答
根本的な問題はHTMLのコーディングルールに沿っていないことと書いてあるが、該当箇所をコメントアウトしても問題は発生していたので別の問題もありそう
mu-sukeNext.jsではなくChakra UIが原因であることがわかった
が、回避策がないのでissueをissueを作成してワークアラウンドがないか問い合わせる
mu-suke再現環境を作るためにcodesandboxを使っている
mu-sukeChakra-UIのリポジトリにissueを作成した
このスクラップは2022/05/31にクローズされました