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

[andysay]

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]

Ensure you have only one root element for your pages, or within any custom transition element.

If that doesn't solve it, would you please provide a reproduction?

[yunyuyuan]

I have followed this guide to create dymanic page(very simple),and encounted the same error.

edited

becaues one page have two element in <template>

[syifeng]

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

and with no transition

nuxt link page1, page2
forward and back 2-3 times

the error just showed up

confirmed that I don't have two element in

[danielroe]

@syifeng Would you provide a reproduction in that case?

[syifeng]

@syifeng Would you provide a reproduction in that case?

when i cut my code to simple demo. The error did not show up. I will check it again. Thanks for replyed

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

[mutuadavid93]

Am using Nuxt 2 and the issue was I was using the fragment npm package on my layouts. After swapping the fragment component with an HTML element e.g. section, nuxt-link now works like a charm.

[ShashankaNataraj]

The Nuxt docs need to have this in them, this was killing me till now: "Do not have a comment in the first line of your template". Apparently, nuxt can't handle this and thinks its a root element. That then kills the rest of the navigation.

[baermathias]

@danielroe I see it the same way, please add to the docs routing section, that no comments should be on the same level as the root tag.

[manniL]

@baermathias Feel free to send in a PR (e.g. here)! ☺️

[danielroe]

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

[kristus123]

i thought the new nuxt version would not need to have a single root element

[manniL]

i thought the new nuxt version would not need to have a single root element

It does not need to have. Then you have to disable transitions though

[shba007]

definePageMeta({ layout: false, });

@danielroe adds <!--[--> which causes Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[steffenstolze]

@shba007 good catch. That's what causing an error within our app, too!

Our original setup looked like this and caused the error as well:

<script setup>
definePageMeta({
	layout: false
});
</script>

<template>
	<NuxtLayout name="auth">
               <div class="flex flex-col flex-grow justify-center py-12 sm:px-6 lg:px-8">
                  ....
               </div>
	</NuxtLayout>
</template>

We changed it to this and got rid of the error message:

<script setup>
definePageMeta({
	layout: 'auth'
});
</script>

<template>
	<div class="flex flex-col flex-grow justify-center py-12 sm:px-6 lg:px-8">
           ....
        </div>
</template>

[deluxenew]

My problem was that I specified for nuxt-page(:transition="{mode: "out-in", name: "fade"}") (which is acceptable in the official documentation), but I needed pageTransition: { name: "fade", mode: "default" } specify in nuxt.config.js

[mkdirnow]

My solution in Nuxt3

export default defineNuxtRouteMiddleware((to, from) => {
  ...
  if (to.name === 'write') {
    if (process.client && !localStorage.getItem('token')) {
      location.replace('/')
      return navigateTo('/', {
        replace: true,
      })
    }
  }
})

[oezkancodes]

For me, this error only happens when I have set the page transition mode to 'out-in' and I change a page again during a page transition (switch pages fast).

export default defineNuxtConfig({
  ssr: false,
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  },
  // ...
});

.page-enter-active,
.page-leave-active {
  @apply origin-center transition-all duration-150 ease-in-out;
}
.page-leave-to {
  @apply scale-95 opacity-0;
}
.page-enter-from {
  @apply scale-105 opacity-0;
}

When I set the page transition mode to 'default', or disable page transitions, the error is gone.

[hlwen]

<div class="app">
    <router-view v-slot="{ Component }">
      <transition :name="$router.customRouterData.transitionName">
        <component class="component" :is="Component" />
      </transition>
    </router-view>
  </div>

关键是

<div class="app">

在最顶层组件必须写，但页面嵌套多层路由时会出现找不到跟节点问题

The key is that the

<div class="app">

component must be written at the top level, but the page can't find the node when it is nested with multiple layers of routes

[hlwen]

For me, this error only happens when I have set the page transition mode to 'out-in' and I change a page again during a page transition (switch pages fast).

export default defineNuxtConfig({
  ssr: false,
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  },
  // ...
});

.page-enter-active,
.page-leave-active {
  @apply origin-center transition-all duration-150 ease-in-out;
}
.page-leave-to {
  @apply scale-95 opacity-0;
}
.page-enter-from {
  @apply scale-105 opacity-0;
}

When I set the page transition mode to 'default', or disable page transitions, the error is gone.

#12735 (comment)

[davinma]

If you use NuxtLayout and NuxtPage in app.vue like this:

<template>
  <NuxtLayout>
    <NuxtPage :transition="transitions" />
  </NuxtLayout>
</template>

You may get error link OP said. Just wrap a div outside the NuxtLayout, like this:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage :transition="transitions" />
    </NuxtLayout>
  </div>
</template>

The error is gone, and transitions will still be effective.

[homerboy19520]

For me, this error only happens when I have set the page transition mode to 'out-in' and I change a page again during a page transition (switch pages fast).

export default defineNuxtConfig({
  ssr: false,
  app: {
    pageTransition: { name: 'page', mode: 'out-in' },
  },
  // ...
});

.page-enter-active,
.page-leave-active {
  @apply origin-center transition-all duration-150 ease-in-out;
}
.page-leave-to {
  @apply scale-95 opacity-0;
}
.page-enter-from {
  @apply scale-105 opacity-0;
}

When I set the page transition mode to 'default', or disable page transitions, the error is gone.

#12735 (comment)

+1

[Disolm]

need to change from mode: 'out - in' to mode: 'in-out'

to get pageTransition: { name: 'page', mode: 'in-out' },

[karombek]

i thought the new nuxt version would not need to have a single root element

If you use NuxtLayout and NuxtPage in app.vue like this:

<template>
  <NuxtLayout>
    <NuxtPage :transition="transitions" />
  </NuxtLayout>
</template>

You may get error link OP said. Just wrap a div outside the NuxtLayout, like this:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage :transition="transitions" />
    </NuxtLayout>
  </div>
</template>

The error is gone, and transitions will still be effective.

in my case, I just turned pageTransitions registered in nuxt config, and then there is no error

[OssiPesonen]

I had to switch to using mode: 'default' for this error to disappear. If you navigate a static website quickly enough ie. you switch to another route before the transition completes, the content stops rendering (because of the error) and essentially just shows a blank page. Didn't matter if I had a root element in app.vue or not.