🐵
Nuxt Mismatching childNodes vs. VNodes
結論
<!-- -->
のコメントアウトをと、タグに囲まれていないテキストが同じ階層にあるとこのエラーが発生する。
<template>
:
<!-- comment -->
表示させたい何らかのテキスト
:
</template>
コメントを削除するか、隣接するテキストをタグで囲む。
<template>
:
表示させたい何らかのテキスト
:
</template>
or
<template>
:
<!-- comment -->
<span>表示させたい何らかのテキスト</span>
:
</template>
概要
このエラーで5時間無駄にしたので、記事を作成しました。
初め合わせて表示されるエラーである
The client-side rendered virtual DOM tree is not matching server-rendered content
という内容でばかり検索しており、すべて試すも解決せずでした。
エラーのすぐ上に表示されている警告文で検索したら、
以下の気に行き当たり、試すとすんなり解決しました。
[Nuxt.js] Mismatching childNodes vs. VNodes - Qiita
エラー文で検索した人もたどり着けるように、
この記事を作成いたしました。
[Vue warn]: 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.
Discussion