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

[viandwi24]

Environment

---

• Operating System: Darwin
• Node Version: v17.2.0
• Nuxt Version: 3.0.0-27404660.0f9bcbf
• Package Manager: [email protected]
• Bundler: Vite
• User Config: meta, css, plugins, build, buildModules, components, vite, intlify, vueuse
• Runtime Modules: -
• Build Modules: @nuxtjs/[email protected], @pinia/[email protected], unplugin-icons/nuxt, @nuxtjs/[email protected], @intlify/[email protected], @vueuse/[email protected], ~/modules/tailwind-viewer

---

Reproduction

Using Minimal Nuxt 3 Template : https://codesandbox.io/s/loving-feather-utoky

Using My Template : https://codesandbox.io/s/github/viandwi24/nuxt3-awesome-starter

I tested on both templates above the results are the same

Describe the bug

when navigating too fast an error appears like the log below and the application stops working.

for example when I navigate to the "about" page then quickly navigate again to the "home" page.

like the gif below:

Additional context

No response

Logs

### **CHROME & BRAVE**

VM946 vue.js:7086 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:7086:12)
    at move (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:5432:9)
    at move (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:5405:7)
    at Object.activeBranch.transition.afterLeave (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:2273:15)
    at performRemove (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:5509:20)
    at el._leaveCb (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:2874:9)
    at finishLeave (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:7713:13)
    at resolve2 (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:7743:30)
    at whenTransitionEnds (https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:7825:12)
    at https://utoky.sse.codesandbox.io/_nuxt/node_modules/.vite/vue.js?v=71a85d57:7751:11



### **SAFARI**

[Error] NotFoundError: The object can not be found here.
	insertBefore (vue.js:7086)
	insert (vue.js:7086)
	move (vue.js:5432)
	move (vue.js:5405)
	(anonymous function) (vue.js:2273)
	performRemove (vue.js:5509)
	(anonymous function) (vue.js:2874)
	finishLeave (vue.js:7713)
	(anonymous function) (vue.js:7751)

[olivervorasai]

I can confirm this bug exists on the latest version v3.0.0-27414150.3589a2d

I have also created a minimal reproduction here: https://github.com/olivervorasai/nuxt3-app-transition-error

For me, the error only occurs when page transitions are defined via page- transition css classes

[thplat]

Happens for me as well. Even without the page- transition classes.

[zenojunior]

It happens for me too

[joshistoast]

Bug still present on 3.0.0-27489107.7379184

[psycongaroo]

Bug still present in latest build:

---

• Operating System: Linux
• Node Version: v16.14.2
• Nuxt Version: 3.0.0-27484505.9f6eff7
• Package Manager: [email protected]
• Builder: vite
• User Config: vite, privateRuntimeConfig, publicRuntimeConfig, css, buildModules, lodash, intlify, vueuse
• Runtime Modules: -
• Build Modules: @pinia/[email protected], @vueuse/[email protected], @intlify/[email protected], [email protected]

---

[SkySor44]

Bug still present on latest: 3.0.0-27496606.e43ba6e

[danielroe]

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

[vanling]

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;
    }
   
}

[AkioSarkiz]

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

[yalondpsi]

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

[kissu]

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

[vanling]

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

[viandwi24]

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

[15617664182]

它也发生在我身上

and me

[15617664182]

Console error, blank page

[genu]

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

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

[john-prutton]

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

[MaxLikesCode]

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

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

Thank you omg, this works, but why. I worked on my website, came back the next day and somehow I got this bug and apparently the key trick fixed it? How did this happen in the first place?

Edit: Nevermind, it didn't really fix it. Every time I navigate now it reloads all icons and images again and it glitches a little bit. :(

[genu]

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

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

Thank you omg, this works, but why. I worked on my website, came back the next day and somehow I got this bug and apparently the key trick fixed it? How did this happen in the first place?

Edit: Nevermind, it didn't really fix it. Every time I navigate now it reloads all icons and images again and it glitches a little bit. :(

Try also not using <NuxtPage/> (maybe <NuxtLayut/> as well?) as a top-level component. So, use div as a top-level, like so:

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

Its possible that this breaks regardless of the key present because <NuxtPage/> doesn't render anything.

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

[viandwi24]

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

[Willadaygo]

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

[AkioSarkiz]

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

🩼🩼🩼

[lihbr]

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.

[vanling]

@lihbr awesome!

[ayitinya]

<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

[IsraelOrtuno]

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/framework/issues/7038#issuecomment-1251680876

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.

[IsraelOrtuno]

Seems like fixed in rc-12 release. This can be closed @danielroe

[warflash]

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

[Nobi322]

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.

[AkioSarkiz]

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