nuxt: Error When Fast Navigating "Failed to execute 'insertBefore' on 'Node'"

try setting a key to the top level NuxtPage in app.vue like so:

<template>
  <NuxtLayout>
    <NuxtPage :key="$route.fullPath"/>
  </NuxtLayout>
</template>

It happens for me too

Just to be clear, this is an upstream vue bug with nested <Suspense> and until it is fixed there it will be present in Nuxt: follow https://github.com/vuejs/core/issues/5513

@genu your solution worked to get rid of the error.

but the animations transition page is not working again.

@viandwi24 So I seem to have found a temporary fix for this. By still using the :key method like @genu suggests but instead wrapping a <Transition> with a keyed div around the <NuxtPage />.

<NuxtLayout>

  <Transition name="page" mode="out-in">

    <div :key="$route.fullPath">

      <NuxtPage />

    </div>

  </Transition>

</NuxtLayout>

🩼🩼🩼

It works on my side i createed a file named router in /plugins then pasth the code and restart your app nuxt: 3.6.0

I tried this on Nuxt 3.5.2 and it worked but after upgrading to 3.6.5 it didn’t. I updated the code following the Lifecycle Hooks Usage with Plugins Documentation and converted it into TypeScript.

plugins/router.ts

import { Router } from "vue-router";

interface CustomRouter extends Router {
  running?: boolean;
  nextRoute?: string | null;
}

export default defineNuxtPlugin((nuxtApp) => {
  const customRouter: CustomRouter = useNuxtApp().$router;

  nuxtApp.hook("page:start", () => {
    customRouter.running = false;
    customRouter.beforeEach((to, _from, next) => {
      if (customRouter.running) {
        next(true);
      } else {
        customRouter.nextRoute = to.fullPath;
        next(false);
      }
    });
  });
  nuxtApp.hook("page:transition:finish", () => {
    customRouter.running = true;
    if (customRouter.nextRoute) {
      customRouter.push(customRouter.nextRoute);
      customRouter.nextRoute = null;
    }
  });
});

for now I’m overcoming this error with the @vanling example above. at least this way ensures the client doesn’t have a bad experience when an error occurs.

  const messages = [
    `Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`, // chromium based
    `NotFoundError: The object can not be found here.`, // safari
  ]
  if (typeof window !== 'undefined') {
    window.addEventListener('error', (ev) => {
      if (messages.includes(ev.message)) {
        ev.preventDefault()
        window.location.reload()
      }
    })
  }

viandwi24/nuxt3-awesome-starter@d8b1c3b/utils/app.ts#L30-L41

Thanks for this snippet!

Instead of performing a hard reload, I managed to just hot reload the application by keying the layout (basically remounted the content). This allows transitions to keep working (they would just be skipped when navigating too fast) but also to keep the application state.

<script setup lang="ts">
// TODO: Remove when https://github.com/vuejs/core/issues/5513 fixed
const key = ref(0);
const messages = [
	`Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`, // chromium based
	`NotFoundError: The object can not be found here.`, // safari
];
if (typeof window !== "undefined") {
	// @ts-expect-error using arbitrary window key
	if (!window.__vue5513) {
		window.addEventListener("error", (event) => {
			if (messages.includes(event.message)) {
				event.preventDefault();
				console.warn(
					"Rerendering layout because of https://github.com/vuejs/core/issues/5513",
				);
				key.value++;
			}
		});
	}

	// @ts-expect-error using arbitrary window key
	window.__vue5513 = true;
}
</script>

<template>
	<div :key="key">
		<slot />
	</div>
</template>

Same disclaimer as above, it’s fragile, use at your own risk.

A lot of time has passed. Are there any solutions?

@AkioSarkiz Check this link for a temporary solution: https://stackoverflow.com/questions/70396414/nuxtlink-is-updating-route-in-nuxt-3-app-but-not-rendering-contents/70404764

What seems to be the root cause of this problem is now fixed in VueJS core https://github.com/vuejs/core/issues/8105

for now I’m overcoming this error with the @vanling example above. at least this way ensures the client doesn’t have a bad experience when an error occurs.

  const messages = [
    `Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`, // chromium based
    `NotFoundError: The object can not be found here.`, // safari
  ]
  if (typeof window !== 'undefined') {
    window.addEventListener('error', (ev) => {
      if (messages.includes(ev.message)) {
        ev.preventDefault()
        window.location.reload()
      }
    })
  }

https://github.com/viandwi24/nuxt3-awesome-starter/blob/d8b1c3bba15cb6fa42573b8c04eaa0b62edfe94c/utils/app.ts#L30-L41

We needed to get a presentation-like application tested and testers&customer got stuck spamming the next button. So for the time being, while hoping for a fix, we just reload the page when this error appears.

It’s a dirty trick 👀 and not recommended, but for now it does the trick to make the application not unresponsive. You can run the following code as client-only code somewhere.

window.onerror = function(e){
    if(e.includes("NotFoundError:")){
        document.location.reload()
        return true;
    }
   
}

Vue 3.3.10 was just released 🎉

• containing https://github.com/vuejs/core/pull/9309
• which resolved https://github.com/vuejs/core/issues/8105

As this issues was linked to the issue I mentioned, there is a good chance this issue could be resolved by updating Vue to v3.3.10. Would anyone affected please verify?

Hi everyone 👋🏻

I’ve found a temporary solution to get around this problem with a plugin.

export default defineNuxtPlugin({
  name: "router",
  hooks: {
    "page:start"() {
      const nuxtApp = useNuxtApp();
      nuxtApp.$router.running = false;
      nuxtApp.$router.beforeEach((to, from, next) => {
        if (nuxtApp.$router.running) {
          next(true);
        } else {
          next(false);
        }
      });
    },
    "page:transition:finish"() {
      const nuxtApp = useNuxtApp();
      nuxtApp.$router.running = true;
    },
  },
});

The plugin will disable navigation when the ‘page:start’ hook is triggered, then re-enable it with the ‘page:transition:finish’ hook. This way, if there’s a route change during the page transition, the router won’t take it into consideration

It’s not very clean, but I think it’ll do the job just fine until they fix it 😁

I guess the best thing is to modify your layout or App.vue and add the following: <NuxtPage :key="$route.fullPath" /> This worked for me and seems to be the latest fix according to this thread here

Vue 3.3.10 was just released 🎉

• containing fix(runtime-core): Suspense get anchor properly in Transition vuejs/core#9309
• which resolved <Transition> wrapped by <Suspense> breaks entirely if interrupted before it completes vuejs/core#8105

As this issues was linked to the issue I mentioned, there is a good chance this issue could be resolved by updating Vue to v3.3.10. Would anyone affected please verify?

Just tested quickly to update vue to 3.3.10, it seems to have fix the issue for me !

The issue I linked earlier may be linked, but I’ve reproduced more specifically within Vue core: https://github.com/vuejs/core/issues/8105. This does not seem to be an issue in vue-router. (cc: @posva)

Hi, I had the same bug in my app. After hours of struggling and searching for the best solution, I ended with a plugin, middleware and custom page transitions using GSAP (ofc can use any other library or vanilla js transitions). Finally it seems to work just fine, without any flickering or browser refreshes.

I wrapped NuxtPage component in app.vue in a div with .page-wrapper class, then animated it within the middleware and app hook. Here’s my solution:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook("app:mounted", () => {
    useRouter().beforeEach((to, from, next) => {
      useNuxtApp().$gsap.to(".page-wrapper", {
        opacity: 0,
        y: 32,
        filter: "blur(10px)",
        duration: 0.3,
        onComplete: () => {
          next();
          useNuxtApp().$gsap.to(".page-wrapper", { opacity: 1, y: 0, filter: "blur(0px)", duration: 0.3 });
        },
      });
    });
  });
});

@kissu yes, but I think the problem is different than the one in this issue 😃 The solution in that link is about using a single root element which has nothing to do with this issue.

v3.5.1 still exists this problem,hope fix it soon.

Fixed in this release for me https://github.com/nuxt/nuxt/releases/tag/v3.9.1

By denying users too fast routing, we can use middleware, this value should be greater than twice animation time (I tested).

// composables/states.ts
export const useLastRouteTime = () => useState<number>('lastRouteTime', () => 0)

// middleware/route.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const routeTime = useLastRouteTime()
  // reject too fast route change, in 250ms
  if (new Date().getTime() - routeTime.value < 250)
    return false
  routeTime.value = new Date().getTime()
})

but until the perfect solution is found, perhaps we should give the user (courageous user!!) some hints, not to operate too fast (although this is counter-intuitive).

Edit: this method will delay routing, and prevent the user from continuing the operation during this period.

export default defineNuxtRouteMiddleware((to, from) => {
  const routeTime = useLastRouteTime()
  const deltaTime = new Date().getTime() - routeTime.value
  if (deltaTime < 250) {
    // use modal to prevent user from clicking
    // showLoadingToast from @vant
    showLoadingToast({
      duration: 250 - deltaTime + 20,
      message: 'loading...',
      forbidClick: true,
      onClose: () => {
        navigateTo(to)
      },
    })
    return false
  }
  routeTime.value = new Date().getTime()
})

Just tried with a rc12 deployment and it still ran into the same same issues. Are you sure @IsraelOrtuno?

What seems to be the root cause of this problem is now fixed in VueJS core vuejs/core#8105

An unbelievable early Christmas present! 🎁 🎉

@YozhikR @CodeLearningSlayer давайте, пожалуйста, на английском в таких репозиториях. Особенно, когда цель получить помощь или помочь кому-то, вас просто не поймут.

"nuxt": "3.8.1", the problem still exists. (I ve tried most of the solutions above but none of them is really fixed)

Temporarily fixed using this(Although it causes flashing on rerenders):

<script setup>
const { key } = useFixPageTransition()
</script>

<template>
  <NuxtLayout :key="key">
    <NuxtPage />
  </NuxtLayout>
</template>

export default function useFixPageTransition() {
  // TODO: Remove when https://github.com/nuxt/nuxt/issues/13350 fixed
  const key = ref(0)
  const messages = [
    'Uncaught NotFoundError: Failed to execute \'insertBefore\' on \'Node\': The node before which the new node is to be inserted is not a child of this node.', // chromium based
    'NotFoundError: The object can not be found here.', // safari
    'NotFoundError: Node.insertBefore: Child to insert before is not a child of this node', // firefox
  ]
  if (typeof window !== 'undefined') {
    // @ts-expect-error using arbitrary window key
    if (!window.__vue5513) {
      window.addEventListener('error', (event) => {
        if (messages.includes(event.message)) {
          event.preventDefault()
          console.warn(
            'Rerendering layout because of https://github.com/vuejs/core/issues/5513',
          )
          key.value++
        }
      })
    }

    // @ts-expect-error using arbitrary window key
    window.__vue5513 = true
  }

  return {
    key,
  }
}

Edit: Added message for firefox

After trying all recommended solutions for quite a while, @lihbr’s seems to be the most stable for my case

Got an E-Mail Notification for every reply here and after 1 year and 4 months it’s finally fixed 🥹

I think it should currently be the default behavior. I made a little change to keep the last intended route so user won’t lose his last click.

export default defineNuxtPlugin({
  name: 'router',
  hooks: {
    'page:start': function () {
      const nuxtApp = useNuxtApp()
      nuxtApp.$router.running = false
      nuxtApp.$router.beforeEach((to, from, next) => {
        if (nuxtApp.$router.running) { next(true) }
        else {
          nuxtApp.$router.nextRoute = to.fullPath
          next(false)
        }
      })
    },
    'page:transition:finish': function () {
      const nuxtApp = useNuxtApp()
      nuxtApp.$router.running = true
      if (nuxtApp.$router.nextRoute) {
        nuxtApp.$router.push(nuxtApp.$router.nextRoute)
        nuxtApp.$router.nextRoute = null
      }
    },
  },
})

It works on my side i createed a file named router in /plugins then pasth the code and restart your app nuxt: 3.6.0

I had already commented #12735, but the issue was already closed. I hope my experience on this helps to solve this issue.

Nuxt version: ^3.3.2

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.

Transitions are a better UX, but you can develop without them.

I’m going to put up a ticket as an issue for my company and wait until the core problem is resolved, but I want it to be resolved as soon as possible. We want to give our users an experience that exceeds their expectations.

<template>
  <NuxtLayout>
      <NuxtPage />
  </NuxtLayout>
</template>

Changing my app.vue content to the above solved it for me. Somehow this solved my problem, I don’t know the reason. Hope it helps you

@genu your solution worked to get rid of the error. but the animations transition page is not working again.

the transition I use is like my reproduction code above.

.page-enter-active {
  transition: all 0.1s ease-out;
}
.page-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.page-enter-from,
.page-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

.layout-enter-active {
  transition: all 0.1s ease-out;
}
.layout-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.layout-enter-from,
.layout-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

and it becomes a problem as @olivervorasai explained above, that in his case this problem will arise when he defines the transitions for the page.

Strange hyperlink given above, this one should be better: https://stackoverflow.com/questions/70396414/nuxtlink-is-updating-route-in-nuxt-3-app-but-not-rendering-contents/70404764

@pdahlenburg Nuxt 3.8.2 does not have the latest version of Vue. Please update Vue or wait for a new version of Nuxt.

В моем случае я столкнулся с такими проблемами: Эта ошибка возникает когда в компоненте из хранилища или в самом компоненте я использую useFetch. Поэтому добавление key для ближайшего уровня <NuxtPage> решает мою проблему, но теряется анимация.

<NuxtPage :key="$route.fullPath"/>

Поэтому, я использую (костыль?). Я не могу найти точно, где в документации говорится что так делать не рекомендуется.

<Transition name="page" mode="out-in">
	<div :key="$route.fullPath">
		<NuxtPage />
	</div>
</Transition>

В моем случае это работает, и вроде бы ничего не ломается.

None of the solutions above worked for me. I got this error on any page calling useFetch(), and I it also threw a Vue internal scheduler flush issue warning in the console (similar to #22552).

After hours of messing around, the only solution that worked was crating a custom RouterLink component and manually disabling it with a timeout to prevent fast navigation. Works for now, but hopefully this gets fixed soon.

CustomNuxtLink.vue

<template>
    <a :href="fullPath" :class="class" @click.prevent="handleClick">
        <slot />
    </a>
</template>

<script setup lang="ts">
import { RouteLocationRaw } from '#vue-router';

const router = useNuxtApp().$router;
const disabled = ref(false);

const props = defineProps<{
    to: RouteLocationRaw;
    class?: string;
}>();

const fullPath = ref(useNuxtApp().$router.resolve(props.to).fullPath);

const handleClick = () => {
    if (disabled.value) {
        return;
    }

    disabled.value = true;
    router.push(props.to);
    router.beforeResolve(() => {
        setTimeout(() => {
            disabled.value = false;
        }, 1000);
    });
};
</script>

Hi everyone 👋🏻

I’ve found a temporary solution to get around this problem with a plugin.

export default defineNuxtPlugin({
  name: "router",
  hooks: {
    "page:start"() {
      const nuxtApp = useNuxtApp();
      nuxtApp.$router.running = false;
      nuxtApp.$router.beforeEach((to, from, next) => {
        if (nuxtApp.$router.running) {
          next(true);
        } else {
          next(false);
        }
      });
    },
    "page:transition:finish"() {
      const nuxtApp = useNuxtApp();
      nuxtApp.$router.running = true;
    },
  },
});

The plugin will disable navigation when the ‘page:start’ hook is triggered, then re-enable it with the ‘page:transition:finish’ hook. This way, if there’s a route change during the page transition, the router won’t take it into consideration

It’s not very clean, but I think it’ll do the job just fine until they fix it 😁

I think it should currently be the default behavior. I made a little change to keep the last intended route so user won’t lose his last click.

export default defineNuxtPlugin({
  name: 'router',
  hooks: {
    'page:start': function () {
      const nuxtApp = useNuxtApp()
      nuxtApp.$router.running = false
      nuxtApp.$router.beforeEach((to, from, next) => {
        if (nuxtApp.$router.running) { next(true) }
        else {
          nuxtApp.$router.nextRoute = to.fullPath
          next(false)
        }
      })
    },
    'page:transition:finish': function () {
      const nuxtApp = useNuxtApp()
      nuxtApp.$router.running = true
      if (nuxtApp.$router.nextRoute) {
        nuxtApp.$router.push(nuxtApp.$router.nextRoute)
        nuxtApp.$router.nextRoute = null
      }
    },
  },
})

I can confirm this still happens, when using page transitions.

updated one of the above reproductions here: https://github.com/vanling/nuxt-3-error-on-fast-navigate

I was not using an App.vue file and I was facing this issue when navigating from a page with disabled layout option to a page with layout enabled.

https://github.com/nuxt/nuxt.js/issues/14744

I created the App.vue file just like this and seems to work:

<template>
  <NuxtLayout>
    <NuxtPage :key="$route.fullPath" />
  </NuxtLayout>
</template>

Don’t really know what’s happening here but seems to work.

@genu’s solution is working for me. Thanks. Incase you don’t want to use app.vue, putting a key in the root element of a layout seems to work.

Still facing this issue while using router.replace with nuxt@3.10.2.

hi @fedikan - do you happen to have traces of the older vue still in your project?

Yeah, i have fully cleared node_modules, .nuxt and package-lock. But seems like the issue is related to mounting algorithm changes, or to some hydration problems. Still figuring out 😕

Still facing this issue while using router.replace with nuxt@3.10.2.

If you can reproduce the issue, then please create a new issue (and feel free to link to this one) @IvanWala Please make sure to include a minimal reproduction though. Saying “I use this and this packages” or dumping the whole project is not a valid repro.

try setting a key to the top level NuxtPage in app.vue like so:

<template>
  <NuxtLayout>
    <NuxtPage :key="$route.fullPath"/>
  </NuxtLayout>
</template>

It brings another problem. If you want to add query on your currwnt route, o=full page will be reload

Got an E-Mail Notification for every reply here and after 1 year and 4 months it’s finally fixed 🥹

Same here, I can’t even remember what brought me here in the first place

Random unknown issue in console maybe? 😄

Great! I understand the previous answers as confirmation, so I’ll go ahead an close this issue 🎉 If there are related issues please consider opening a new issue or - of course - we can reopen this issue if the issue would in fact turn out to not be resolved after all.

I’m glad I subscribed to this thread!

В моем случае я столкнулся с такими проблемами: Эта ошибка возникает когда в компоненте из хранилища или в самом компоненте я использую useFetch. Поэтому добавление key для ближайшего уровня <NuxtPage> решает мою проблему, но теряется анимация.

<NuxtPage :key="$route.fullPath"/>

Поэтому, я использую (костыль?). Я не могу найти точно, где в документации говорится что так делать не рекомендуется.

<Transition name="page" mode="out-in">
	<div :key="$route.fullPath">
		<NuxtPage />
	</div>
</Transition>

В моем случае это работает, и вроде бы ничего не ломается.

https://nuxt.com/docs/api/components/nuxt-page#example - тут приведен правильный вариант, потому что использование $route может привести к проблемам с <Suspense>

@Endermanch Are you really sure it works great on nuxt 3.8.1 ? Beucase I just tried with your solution and it really looked like its working but I didn’t stop navigating. After few “fast” route navigations, I reproduced the same error. Sorry. But thank you anyways. 🙏

It does for me, here’s the showcase: https://youtu.be/avSFaf0ww94 P. S. Don’t mind the IDE showing errors, the JetBrains IDE is going wild sometimes

Do you have any async request on your pages that you navigating around? Edit BTW I should tell that looks promising (99% Works) but im getting same error on 1% chance. and its enough for me not using it. 😦

Nope, no async requests.

async requests are highly increasing the chance of this problem occurs. (almost 70%)

Hello, same problem with page transition and when the tab becomes inactive (when I do something else on my PC or on other tabs and then come back to the page).

• Operating System: Darwin
• Node Version: v18.17.1
• Nuxt Version: 3.7.4
• CLI Version: 3.9.0
• Nitro Version: 2.6.3
• Package Manager: pnpm@8.7.6
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

I had the same problem and based on the article @kissu mentioned, the problem was that I had commented code in the root of the index.vue, so it seems that nuxt understood that it had more than one root node.

This is what works for me. A combo of other peoples work in this thread (thanks all!)

<!-- layouts/default.vue -->
<script setup lang="ts">
onMounted (() => {
  if(process.env.NODE_ENV !== 'development') {
    // Work around for https://github.com/nuxt/nuxt/issues/13350
    // @TODO Remove when fixed
    if (typeof window !== 'undefined') {
      window.addEventListener('error', (ev) => {
        const messages = [
          `Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`, // Chromium
          `NotFoundError: Node.insertBefore: Child to insert before is not a child of this node`, // Firefox
          `NotFoundError: The object can not be found here.` // Safari
        ]

        if (messages.some((message) => ev.message.includes(message))) {
          console.warn('Reloading due to error: https://github.com/nuxt/nuxt/issues/13350')
          ev.preventDefault()
          window.location.reload()
        }
      })
    }
  }
})
</script>

Its not ideal, as I think the messages varies slightly between browser versions.

I found that if this was running on develop then hot reloading no longer worked. So wrapped in the env check.

Unfortunately not. The issue is https://github.com/vuejs/core/issues/8105 (more context: https://github.com/nuxt/nuxt/issues/13350#comment-2175900).

@Sun-ZhenXing I had a similar workaround for that, but users like to use browser navigation and hardware button on mobile so still I was getting a lot of errors.

Currently testing this: https://github.com/nuxt/nuxt/issues/13350#issuecomment-1397297967 . It glitches animations sometimes, but it’s a price I’m willing to pay.

If it doesn’t work then I will add this heavy solution: https://github.com/nuxt/nuxt/issues/13350#issuecomment-1397297690

@madebyfabian There is an upstream bug linked in https://github.com/nuxt/nuxt/issues/13350#issuecomment-1397297522, so as long as this one isn’t fixed it will be a problem.

nuxt is coming release at 3 day, but this bug is not resolved

Also need to add, that such <NuxtPage :key="$route.fullPath" /> workaround broke component reuse. F.e. when you pagination across one component with different data, because it re-render it’s completely. On small examples you don’t see that, but if on something bigger it’s took quite a long time.

@genu your solution worked to get rid of the error. but the animations transition page is not working again.

@viandwi24 So I seem to have found a temporary fix for this. By still using the :key method like @genu suggests but instead wrapping a <Transition> with a keyed div around the <NuxtPage />.

<NuxtLayout>
  <Transition name="page" mode="out-in">
    <div :key="$route.fullPath">
      <NuxtPage />
    </div>
  </Transition>
</NuxtLayout>

Bug still present on latest: 3.0.0-27496606.e43ba6e