VueのHydrationが失敗したメモ

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://my.domain/_nuxt/vendors/commons.3cf3456.js:5196:8)

function removeChild (node, child) {
  node.removeChild(child);
}

function appendChild (node, child) {
  node.appendChild(child);
//^ Error happen here
}

function parentNode (node) {
  return node.parentNode
}

<template>
  <div>
    <h1>Title.</h1>
    <div>name {{ myName }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myName: 'simochee',
    };
  },
  fetch() {
    this.$nuxt.error({ statusCode: 404 });
  },
}
</script>

# 開発環境
> Mismatching childNodes vs. VNodes:  NodeList(3) [h1, text, div] [VNode]

> [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.

# ビルド後
> DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild 

<template>
  <div>
    <h1>Title.</h1>
    <div v-if="isVisible">表示するか</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
    };
  },
  beforeMount() {
    this.isVisible = true;
  },
}
</script>

<template>
  <div>
    <h1>Title.</h1>
    <div v-if="isVisible">表示するか</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
  beforeMount() {
    this.isVisible = false;
  },
}
</script>

<template>
  <div>
    <h1>Title.</h1>
  </div>
</template>

<script>
const wait = new Promise((resolve) => setTimeout(resolve, 1000));

export default {
  async fetch() {
    await wait();
    
    this.$nuxt.error({ statusCode: 404 });
  },
}
</script>

<template>
  <div>
    <h1>Title.</h1>
  </div>
</template>

<script>
export default {
  fetch({ error }) {
    error({ statusCode: 500 });
  },
}
</script>