TypeError: Cannot read properties of null (reading 'parentNode') when navigate from page with NuxtLayout as root node

[RizkiNfs]

Environment

• Operating System: Windows_NT
• Node Version: v20.10.0
• Nuxt Version: 3.9.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.14.1
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -
• Vue Version: 3.4.9

Reproduction

https://stackblitz.com/edit/nuxt-starter-vhqnzj

Describe the bug

when navigate from page with NuxtLayout as root component to another page with NuxtLayout cause TypeError: Cannot read properties of null (reading 'parentNode').
Adding comment above NuxtLayout and still use NuxtLayout as root node doesn't cause this issue (only works in dev mode).
I believe this bug happened after this specific update in vue v3.4.9

Additional context

condition that's trigger this bug :

• navigate from page with NuxtLayout as root node, to another page with NuxtLayout.
• #issuecomment-1898592511

condition that's not trigger this bug :

• navigate from page with NuxtLayout as root node, to another page with NuxtLayout and has pageTransition defined.
• navigate from page with NuxtLayout as root node, to another page without NuxtLayout.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-vhqnzj (Open reproduction)

[danielroe]

Linking here also this repro from @Aareksio: https://stackblitz.com/edit/github-dbis9a.

You need pages with 2 different layouts, one must be nested page. And then you need to call useAsyncData. Which must be { immediate: false }...

[manniL]

@AndersCV Please refrain from posting comments that don't add additional context like "+1", "me too" or "bump". Instead, just upvote the issue through reactions or provide additional context like a reproduction, a new scenario where it happens or anything else that helps resolving the issue.

[manniL]

If someone can reproduce it via https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main we could raise it upstream in Vue core ☺️

[danielroe]

The issue here is that <NuxtLayout> cannot be the root node of a page (or component) because it uses Suspense. (This is also true of <NuxtPage>. We should document this (and have eslint configuration setup), unless we can remove this requirement in Nuxt itself.

Workaround is to do this:

  <template>
+   <div>
      <NuxtLayout name="test">
        <h1>unable navigate to home page</h1>
      </NuxtLayout>
+   </div>
  </template>

Related: #21759.

[agracia-foticos]

With Vue 3.4.8 parentNode error dissapears, but with 3.4.13 and 3.4.14 error persists

[danielward]

The issue here is that <NuxtLayout> cannot be the root node of a page (or component) because it uses Suspense. (This is also true of <NuxtPage>. We should document this (and have eslint configuration setup), unless we can remove this requirement in Nuxt itself.

Workaround is to do this:

  <template>
+   <div>
      <NuxtLayout name="test">
        <h1>unable navigate to home page</h1>
      </NuxtLayout>
+   </div>
  </template>

Related: #21759.

I spent literally hours looking into this over the weekend! The error in the console was somewhat vague, so didn't give much in the way of insight into this. Is this in any way related to the following appearing repeatedly also?

[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.

[agenordebriat]

Workaround doesn’t work for me. I suspect it has something to do with swapping layouts.

[AndersCV]

The same error happens when you're switching between pages that has the <NuxtLayout> while a promise is still resolving.
Happens even when only using default layout and even with a single root node inside page templates. No workaround available for this one im afraid.

Reproduction here: Try switching fast between the 2 pages before the promise is resolved. Observe error in console.
https://stackblitz.com/edit/nuxt-starter-dtnaui

[jeverduzco]

I have this in my app.vue and when updating Nuxt to the 3.9.3 version I have the same problem.

<template>
  <div>
    <Html lang="es-MX">
      <NuxtLayout>
        <NuxtPage />
        <AppNotifications />
      </NuxtLayout>
    </html>
  </div>
</template>

[JenuelDev]

I have a working website its working pretty fine until upgrading to 3.9.3, now It's not letting go to other pages. Its basically shows this error. I believe this error is not from nuxt but from the Latest Vue version I believe.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

I have not changed anything. I have not touched layout. Everything is working before. But now navigating to different pages does not work anymore, after the upgrade.

My Solution and How I solve my this ISSUE in my Project:

so in my main app.vue, I grouped my NuxtPage with NuxtLayout

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

and in my pages, instead of using NuxtLayout, I deleted the NuxtLayout, and added definePageMeta and used my custom layouts. If the page is using the default layout, no need to add definePageMeta.

<script setup lang='ts'>
...
+ definePageMeta({
+  layout: 'custom'
+ })
</script>
  <template>
-      <NuxtLayout name="test">
        <h1>unable navigate to home page</h1>
-      </NuxtLayout>
  </template>

[becem-gharbi]

If someone can reproduce it via https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main we could raise it upstream in Vue core ☺️

Hi @manniL, I have created a reproduction on vue. The navigation between pages without waiting for Suspense to resolve causes this issue. I'm not sure if this is related to vue or vue-router but certainly related to this PR on vue@3.4.9 vuejs/core#10055.

https://stackblitz.com/edit/vitejs-vite-2fvdtp?file=src%2FApp.vue

[agenordebriat]

If someone can reproduce it via https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main we could raise it upstream in Vue core ☺️

Hi @manniL, I have created a reproduction on vue. The navigation between pages without waiting for Suspense to resolve causes this issue. I'm not sure if this is related to vue or vue-router but certainly related to this PR on vue@3.4.9 vuejs/core#10055.

https://stackblitz.com/edit/vitejs-vite-2fvdtp?file=src%2FApp.vue

I don't have any issue as soon as Vue is <3.4.0 (3.3.13 currently).

[manniL]

@becem-gharbi Thanks!

BTW: vuejs/core#10184 might resolve it 👍

[fosterdouglas]

Can anyone confirm which specific Vue version + Nuxt version will prevent this in the meantime ? I've tried a few combos without great results. Wrapping layout tags in divs didn't seem to solve it for me as a workaround.

[Aareksio]

There is already a comment in this regard above: #25214 (comment)

You need Vue 3.4.8 or earlier. You can use your package manager (npm, pnpm, yarn), example package.json for pnpm:

{
  "pnpm": {
    "overrides": {
      "vue": "3.4.8"
    }
  }
}

No need to downgrade Nuxt.

[palaxius]

In Nuxt3 after overriding the vue version to 3.4.8, we observe a memory leak in the component when the ssr is enabled. The component has complex logic with watchers and computers. Had someone the same?

[McPizza0]

this may not be useful for all
we visit a redirect page just before changing layout

adding the following to the redirect page overcomes the issue

reloadNuxtApp({
    path: `/${orgSlug}/convo`,
    force: true,
    ttl: 5000
  });

if you've only got a couple of layouts with single entry points, you could add this to the first page that loads (remove the path property)
or create a redirect page as we have in UnInbox

see un/inbox@4829afc for ref

[manniL]

@norbertSG @nethriis Please refrain from posting comments that don't add additional context like "+1", "me too" or "bump". Instead, just upvote the issue through reactions or provide additional context like a reproduction, a new scenario where it happens or anything else that helps resolving the issue.

[ghartemann]

It would seem that this is indeed linked to layout swapping in some way. Our app breaks when navigating from a page with a layout to a nested page with a different layout.

We managed to fix it in a few cases by doing this in the script part:

definePageMeta({
-   layout: 'custom'
+   layout: false
});

and wrapping our individual pages with NuxtLayout tags like this:

<template>
+   <NuxtLayout name="custom">
        <!-- our code -->
+   </NuxtLayout>
</template>

I don't know if it's the best way but this works for us right now in most components. In others, it simply won't work and keeps on breaking navigation.

[FatNerdPeng]

I encountered the same problem and I'm not sure if it's related to dynamic components. In my case, this is my version of nuxt and vue:

my page is dynamic routing /pages/user/main/[id].vue
Initially, I used a dynamic component on this page:

It will return this component <UserThemeDefault>:

Then the browser will report an error Cannot read properties of undefined (reading 'parentNode') , and my page will not display any content,and my route will get stuck on this page, making it impossible for me to navigate to other pages through navigateTo

But if I use this component directly, there is no problem(including routing redirection navigateTo):


So what I want to express is, maybe this issue is not related to the Vue or Nuxt versions, maybe it's related to dynamic components?

[warflash]

Vue 3.4.20 just landed which inludes vuejs/core#10184
Based on personal testing and the updated initial reproduction provided this seems to have solved the issue.

[sa8ab]

Confirming issue being fixed on Vue v3.4.20.
On my project I had to update the vue version on dev dependency

  "devDependencies": {
    "nuxt": "^3.10.1",
    "vue": "^3.4.20",  /* <-- updated vue version */
  },

[sanjarbarakayev]

In my case, the issue was fixed by checking the Teleport component with v-if on mount.

<template>
  ...
  <Teleport v-if="mounted" to="#target">
    ...
  </Teleport>
...
</template>

<script setup lang="ts">
const { mounted } = useMounted()
</script>

[danielroe]

Closing this issue as I believe it's been resolved in Vue v3.4.20.

If someone experiences this again, please open a new issue with a reproduction.