Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Environment

---

• Operating System: Windows_NT
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-27264620.a62351a
• Package Manager: npm@8.1.2
• Bundler: Vite
• User Config: vite, css, build
• Runtime Modules: -
• Build Modules: -

---

Describe the bug

if use navigation browser, pages stop load… and return this error.

Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.

Reproduction

nuxt page have style

.page-enter-active, .page-leave-active { transition: opacity .5s; } .page-enter, .page-leave-active { opacity: 0; }

nuxt link page1, page2

forward and back 2-3 times

Additional context

No response

Logs

No response

[danielroe]

It is already there: https://v3.nuxtjs.org/guide/directory-structure/pages#usage. Improvements welcome 🙏

[syifeng]

@syifeng Would you provide a reproduction in that case?

@danielroe I just found the reason what caused the Error.

I commented the code element in the template.

a wired Error. hard to found. /pages/index.vue

--- bad
<template>
 <!-- <div class="bg-emerald-300 leading-9">
    <span>{{statusNow}}</span>
  </div> -->
 <div>
main body
</div>
</template>

--- good
<template>
 <div>
main body
</div>
</template>
``