みかづきブログ・カスタム

基本的にはちょちょいのほいです。

続・Nuxt.jsで、This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. というエラーが出たので調査する 🔍

f:id:kimizuka:20200811145835p:plain

blog.kimizuka.org

またもや、

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マークアップが原因である可能性があります。ハイドレーションをベイルし、完全なクライアント側レンダリングを実行します。

今回はtableタグを使っていたので、そこが怪しいと思って調べてみると、

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

という感じでマークアップしていたが、tr要素を、thead要素、tbody要素、tfoot要素のいずれかでラップするとエラーが消えることがわかった。

<table>
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>

あれ、tbody要素って必須だったけか?と思い、調べてみると、

< table > 要素をグラフィカルに表示するにあたり、< tbody > 要素は必須ではない子要素です。ただし、< table > 要素の子要素として < tr > 要素が存在する場合は tbody を配置してはいけません。

< tbody > を使用する場合、 < table > の直接の子として表の行 (< tr > 要素) 置くことはできませんが、 < tbody > の中には置くことができます。 < tbody > を使用する場合は、ヘッダーでもフッターでもない行をすべてその中に入れる必要があります。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/tbody より引用


とのこと。
これを読むと、必須ではなさそうだし、むしろtable要素の直下にtr要素を置くことを推奨されている印象を受ける。
(実際はtbodyを置いたら、trはその中に置けということだと思う)

一応原文も確認してみると、

The < tbody > element is not a required child element for a parent < table > element to graphically render. However, it must not be present, if its parent < table > element has a < tr > element as a child.

If you use , you can't also have table rows ( elements) which are direct children of the

but not included inside the . All non-header and non-footer rows must be inside the if one is used.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody より引用

と、同じことが書いてある。

とまあ、本来必須の要素ではないようだが、Vueのレンダリング上では必須扱いになっているのかもしれない。
とりあえず、tbodyを入れてエラーが消えたので、今回はそれで良しとする。