🐵

Nuxt Mismatching childNodes vs. VNodes

2021/05/03に公開

結論

<!-- --> のコメントアウトをと、タグに囲まれていないテキストが同じ階層にあるとこのエラーが発生する。

<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