Nuxt.jsでウェブアプリをつくっていたら、
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside < p >, or missing < tbody >. Bailing hydration and performing full client-side render.
というエラーが出た。
クライアント側でレンダリングされた仮想DOMツリーは、サーバーでレンダリングされたコンテンツと一致しません。これは、< p >内にブロックレベルの要素をネストしたり、< tbody >が欠落しているなど、誤ったHTMLマークアップが原因である可能性があります。ハイドレーションをベイルし、完全なクライアント側レンダリングを実行します。
tbodyタグなんて使ってないけどなと思ったが、思いっきりpタグの中にブロック要素を入れていた。
コンポーネントを跨いでいたので気づかなかった。。。
このエラーが出たら、とりあえず吐き出されたHTMLをリンターに掛けるのが手っ取り早そうだと思った。
