redirection within `onMounted` hook with transition enabled causes a hydration error

[sxgrant]

Environment

---

• Operating System: Darwin
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-rc.6
• Package Manager: [email protected]
• Builder: vite
• User Config: build, buildModules, runtimeConfig
• Runtime Modules: -
• Build Modules: @pinia/[email protected]

---

Reproduction

Was able to reproduce a simplified version of my code which sees the same problem: https://stackblitz.com/edit/github-r6amfg?file=app.vue

Describe the bug

Update: See comment thread for simpler description of the issue - my original description is unnecessarily complicated to reproduce the problem.

In my project, I have two levels of routing. The app.vue has a <NuxtPage>, and the /home/ route has a <NuxtPage>

A logo is always present in the top left, which will navigate to /home/ (no subroute specified). A pages/home/index.vue file provides a default subroute by calling navigateTo('home/foo'), which so far as I can tell is the best way to handle a default subroute in Nuxt 3.

Clicking this logo works fine from most pages, but if clicked from within home/foo or home/bar it causes the following 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

No home/* subroutes will load successfully from then on.

I'm aware of https://github.com/nuxt/framework/issues/1664 and don't see how the solution therein around ensuring only single-root elements is relevant to my codebase, or the stackblitz reproduction linked here.

Additional context

No response

Logs

runtime-dom.esm-bundler.js:10 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 (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:7330:12)
    at move (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:5964:9)
    at move (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:5937:7)
    at move (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:5937:7)
    at activeBranch.transition.afterLeave (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:2388:15)
    at performRemove (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:6051:20)
    at el._leaveCb (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:3025:9)
    at finishLeave (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:7960:13)
    at resolve2 (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:7991:30)
    at whenTransitionEnds (http://localhost:3000/_nuxt/node_modules/.vite/deps/chunk-MC4345I5.js?v=338140a1:8076:12)

[danielroe]

It may not be the issue - not looked into it in more detail - but your index page does have two root elements:

<template>
  <nuxt-link to="/parent">Go to parent</nuxt-link>
  <nuxt-link to="/other">Go to other</nuxt-link>
</template>

[sxgrant]

🤦‍♂️ Oops, you're right. I've fixed that in the linked StackBlitz and the behaviour is still the same.

[sxgrant]

I've updated the title because this issue seems simpler than my original case.

Nested routes are irrelevant, this behaviour is the same with a simple routing structure: https://stackblitz.com/edit/github-fu1vnc?file=app.vue

Using pages/index.vue to redirect to a "default" route works fine initially when first loading root domain, but will break when. you either navigateTo("/") or use a <nuxt-link to="/">

[danielroe]

I think the root issue here is the same as https://github.com/nuxt/framework/issues/3587 and is an upstream suspense + transition issue.

You can work around it by disabling page transitions, which will be easier once https://github.com/nuxt/framework/pull/5859 is merged.

See for example: https://stackblitz.com/edit/github-fu1vnc-9x1zyu