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

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.

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

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>

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

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.

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?

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.

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

@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>

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 <template>

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.

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.

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.

https://github.com/nuxt/nuxt/issues/12735#issuecomment-1598015192

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

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

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

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.