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

viandwi24 · 2022-02-09T18:05:40Z

Environment

Operating System: Darwin
Node Version: v17.2.0
Nuxt Version: 3.0.0-27404660.0f9bcbf
Package Manager: yarn@1.22.17
Bundler: Vite
User Config: meta, css, plugins, build, buildModules, components, vite, intlify, vueuse
Runtime Modules: -
Build Modules: @nuxtjs/eslint-module@3.0.2, @pinia/nuxt@0.1.8, unplugin-icons/nuxt, @nuxtjs/svg@0.3.0, @intlify/nuxt3@0.1.10, @vueuse/nuxt@7.5.5, ~/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)

The text was updated successfully, but these errors were encountered:

thplat · 2022-02-19T19:40:51Z

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

zenojunior · 2022-03-06T02:14:11Z

It happens for me too

joshistoast · 2022-04-07T19:00:00Z

Bug still present on 3.0.0-27489107.7379184

psycongaroo · 2022-04-08T13:01:25Z

Bug still present in latest build:

Operating System: Linux
Node Version: v16.14.2
Nuxt Version: 3.0.0-27484505.9f6eff7
Package Manager: yarn@1.22.18
Builder: vite
User Config: vite, privateRuntimeConfig, publicRuntimeConfig, css, buildModules, lodash, intlify, vueuse
Runtime Modules: -
Build Modules: @pinia/nuxt@0.1.8, @vueuse/nuxt@8.2.5, @intlify/nuxt3@0.1.10, nuxt-lodash@2.1.1

SkySor44 · 2022-04-13T03:39:02Z

Bug still present on latest: 3.0.0-27496606.e43ba6e

danielroe · 2022-04-13T12:15:42Z

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 vuejs/core#5513

vanling · 2022-05-29T11:00:07Z

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 · 2022-06-19T21:00:36Z

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

yalondpsi · 2022-06-20T13:44:29Z

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 · 2022-06-22T00:04:24Z

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 · 2022-06-22T14:16:09Z

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

…mework/issues/3141

viandwi24 · 2022-07-02T12:44:35Z

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 · 2022-08-03T11:41:25Z

它也发生在我身上

and me

15617664182 · 2022-08-03T11:42:09Z

Console error, blank page

genu · 2022-08-05T16:42:47Z

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

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

john-prutton · 2022-08-08T10:54:30Z

@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 · 2022-08-10T21:10:53Z

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 · 2022-08-11T15:17:20Z

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>

Endermanch · 2023-11-19T19:43:55Z

Thank you, works great on Nuxt 3.8.1! Had to slightly tweak the plugin for it to work. In the end I called it router.client.ts.
The initial issue has been resolved on Vue's side. Nuxt maintainers, any progress on the fix?

import type { Router } from 'vue-router'

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

export default defineNuxtPlugin((nuxtApp) => {
  const customRouter: CustomRouter = useRouter()

  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)
        .then(() => (customRouter.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 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;
    }
  });
});

bayramorhan · 2023-11-19T20:15:12Z

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

Endermanch · 2023-11-19T20:34:40Z

@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

bayramorhan · 2023-11-19T20:48:03Z

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

Endermanch · 2023-11-19T21:57:41Z

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

bayramorhan · 2023-11-19T23:21:53Z

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

YozhikR · 2023-11-26T18:58:50Z

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

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

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

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

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

CodeLearningSlayer · 2023-11-27T09:20:27Z

В моем случае я столкнулся с такими проблемами: Эта ошибка возникает когда в компоненте из хранилища или в самом компоненте я использую 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 может привести к проблемам с

daniluk4000 · 2023-11-27T09:24:56Z

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

avaz · 2023-12-04T09:02:15Z

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

bgrand-ch · 2023-12-04T13:44:35Z

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

An unbelievable early Christmas present! 🎁 🎉

dargmuesli · 2023-12-04T14:32:53Z

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?

leo91000 · 2023-12-04T20:42:33Z

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 !

sdr0x07b6 · 2023-12-04T20:45:20Z

I'm glad I subscribed to this thread!

MaxLikesCode · 2023-12-04T20:47:21Z

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

dargmuesli · 2023-12-04T21:09:44Z

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.

ayitinya · 2023-12-04T21:17:38Z

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

daniluk4000 · 2023-12-04T21:19:35Z

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? :D

pdahlenburg · 2023-12-11T07:20:33Z

Using Nuxt 3.8.2 and still got the error. Using an async $fetch and the layout gets messed up.

When removing the transitions or change it to mode: 'default' instead of mode: 'out-in', everything works fine.

bgrand-ch · 2023-12-11T09:38:01Z

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

xushnudbek20 · 2023-12-11T10:26:09Z

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

bgrand-ch · 2024-01-01T20:27:04Z

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?

Works perfectly! Thanks

manniL · 2024-01-03T12:50:15Z

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.

miclgael · 2024-01-07T22:04:48Z

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

fedikan · 2024-02-22T13:00:28Z

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

miclgael · 2024-02-25T10:32:12Z

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?

fedikan · 2024-02-26T16:26:30Z

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 :/

viandwi24 added nuxt3 pending triage labels Feb 9, 2022

danielroe mentioned this issue Feb 23, 2022

Nested routes + <Suspense> triggers Vue unhandled error vuejs/router#1319

Open

danielroe added bug upstream ❗ p4-important upstream-bug and removed pending triage bug labels Feb 23, 2022

danielroe removed the nuxt3 label Apr 15, 2022

danielroe mentioned this issue Jan 19, 2023

Page transition out-in mode cause runtime error #14128

Closed

viandwi24 referenced this issue in viandwi24/nuxt3-awesome-starter Jun 28, 2022

fix: fix: handle error when fast navigate https://github.com/nuxt/fra…

5134a99

…mework/issues/3141

dargmuesli closed this as completed Dec 4, 2023

kangelopoulos mentioned this issue Jan 4, 2024

Fast Navigation on SSG Initial Page Load Causes Nuxt to Rerun Asyncdata and Not Load payload.json #25049

Closed

Mini-ghost mentioned this issue May 5, 2024

Failed to execute 'insertBefore' on 'Node': with useAsyncData and Pre-Rendering #27060

Closed

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

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

Comments

viandwi24 commented Feb 9, 2022

Environment

Reproduction

Describe the bug

Additional context

Logs

thplat commented Feb 19, 2022

zenojunior commented Mar 6, 2022

joshistoast commented Apr 7, 2022

psycongaroo commented Apr 8, 2022

SkySor44 commented Apr 13, 2022

danielroe commented Apr 13, 2022

vanling commented May 29, 2022 • edited

AkioSarkiz commented Jun 19, 2022

yalondpsi commented Jun 20, 2022

kissu commented Jun 22, 2022 • edited

vanling commented Jun 22, 2022 • edited

viandwi24 commented Jul 2, 2022

15617664182 commented Aug 3, 2022

15617664182 commented Aug 3, 2022

genu commented Aug 5, 2022

john-prutton commented Aug 8, 2022

MaxLikesCode commented Aug 10, 2022 • edited

genu commented Aug 11, 2022 • edited

Endermanch commented Nov 19, 2023

bayramorhan commented Nov 19, 2023 • edited

Endermanch commented Nov 19, 2023 • edited

bayramorhan commented Nov 19, 2023 • edited

Endermanch commented Nov 19, 2023

bayramorhan commented Nov 19, 2023

YozhikR commented Nov 26, 2023

CodeLearningSlayer commented Nov 27, 2023

daniluk4000 commented Nov 27, 2023

avaz commented Dec 4, 2023

bgrand-ch commented Dec 4, 2023 • edited

dargmuesli commented Dec 4, 2023

leo91000 commented Dec 4, 2023 • edited

sdr0x07b6 commented Dec 4, 2023

MaxLikesCode commented Dec 4, 2023

dargmuesli commented Dec 4, 2023

ayitinya commented Dec 4, 2023

daniluk4000 commented Dec 4, 2023

pdahlenburg commented Dec 11, 2023 • edited

bgrand-ch commented Dec 11, 2023

xushnudbek20 commented Dec 11, 2023

bgrand-ch commented Jan 1, 2024

manniL commented Jan 3, 2024

miclgael commented Jan 7, 2024

fedikan commented Feb 22, 2024

miclgael commented Feb 25, 2024

fedikan commented Feb 26, 2024

vanling commented May 29, 2022 •

edited

kissu commented Jun 22, 2022 •

edited

vanling commented Jun 22, 2022 •

edited

MaxLikesCode commented Aug 10, 2022 •

edited

genu commented Aug 11, 2022 •

edited

bayramorhan commented Nov 19, 2023 •

edited

Endermanch commented Nov 19, 2023 •

edited

bayramorhan commented Nov 19, 2023 •

edited

bgrand-ch commented Dec 4, 2023 •

edited

leo91000 commented Dec 4, 2023 •

edited

pdahlenburg commented Dec 11, 2023 •

edited