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

[nurdism]

Environment

---

• Operating System: Linux
• Node Version: v14.18.1
• Nuxt Version: 3.0.0-27389502.88da719
• Package Manager: [email protected]
• Bundler: Vite
• User Config: ssr
• Runtime Modules: -
• Build Modules: -

---

Reproduction

use this sandbox, Visit ${url}/organization/365824000000000003/template/new click on the "a" link then the "b" link and this error is thrown:

runtime-core.esm-bundler.js:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Transition name="page" mode="out-in" > 
  at <Dashboard name="dashboard" > 
  at <AsyncComponentWrapper name="dashboard" > 
  at <NuxtLayout name="dashboard" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <App> 
  at <NuxtRoot>

runtime-dom.esm-bundler.js:35 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (runtime-dom.esm-bundler.js:35:30)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5109:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160:29)
    at updateComponent (runtime-core.esm-bundler.js:4968:26)
    at processComponent (runtime-core.esm-bundler.js:4901:13)
    at patch (runtime-core.esm-bundler.js:4489:21)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5262:17)
    at patchChildren (runtime-core.esm-bundler.js:5205:21)
    at processFragment (runtime-core.esm-bundler.js:4886:17)
    at patch (runtime-core.esm-bundler.js:4482:17)

Describe the bug

hooks page:start and page:finish don't seem to fire on pages ${url}/organization/* and an error is thrown when using await in the <script setup> and then navigating to a new page.

I don't know if this is due to the page structure or the the way the pages are set up. It's taken me all day to get this error to reproduce and the only way I've gotten this to throw is with this folder structure and by

• first visiting a page that doesn't use await in the <script setup>
• then visiting a page that does uses await
• then by using vue-router to navigate to another page

Additional context

No response

Logs

No response

[rvmourik]

Don't now if it is helpful, but I experienced some similar errors while developing our app. In the end it was caused by a transition component as the root component in the template. Navigating between routes sometimes caused the parentNode issue.

Also our pages setup looks a lot like yours, so maybe it is helpful :-)

[nurdism]

@rvmourik is on the right track, I went ahead and recreated the <NuxtPage /> component, when I remove the <Transition /> before the <NuxtLayout /> the error does not pop up, but the page:start and the page:finish are still not firing

[rvmourik]

@rvmourik is on the right track, I went ahead and recreated the <NuxtPage /> component, when I remove the <Transition /> before the <NuxtLayout /> the error does not pop up, but the page:start and the page:finish are still not firing

I did the exact same thing to work around the error, it might be related to the combination of dynamic routes and nested pages.

[anburocky3]

I too face the same problem, i did created a div parent of app.vue and the link is navigating now, but i see the following error consoled.

vue.js?v=2018aa88:103 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn @ vue.js?v=2018aa88:103
logError @ vue.js?v=2018aa88:257
handleError @ vue.js?v=2018aa88:249
callWithErrorHandling @ vue.js?v=2018aa88:206
flushJobs @ vue.js?v=2018aa88:396
Promise.then (async)
queueFlush @ vue.js?v=2018aa88:311
queueJob @ vue.js?v=2018aa88:305
(anonymous) @ vue.js?v=2018aa88:4057
triggerEffects @ chunk-ABITFNDB.js?v=2018aa88:571
triggerRefValue @ chunk-ABITFNDB.js?v=2018aa88:1072
(anonymous) @ chunk-ABITFNDB.js?v=2018aa88:1196
triggerEffects @ chunk-ABITFNDB.js?v=2018aa88:571
triggerRefValue @ chunk-ABITFNDB.js?v=2018aa88:1072
(anonymous) @ chunk-ABITFNDB.js?v=2018aa88:1196
triggerEffects @ chunk-ABITFNDB.js?v=2018aa88:571
triggerRefValue @ chunk-ABITFNDB.js?v=2018aa88:1072
(anonymous) @ chunk-ABITFNDB.js?v=2018aa88:1196
triggerEffects @ chunk-ABITFNDB.js?v=2018aa88:571
triggerRefValue @ chunk-ABITFNDB.js?v=2018aa88:1072
(anonymous) @ chunk-ABITFNDB.js?v=2018aa88:1196
triggerEffects @ chunk-ABITFNDB.js?v=2018aa88:571
triggerRefValue @ chunk-ABITFNDB.js?v=2018aa88:1072
set value @ chunk-ABITFNDB.js?v=2018aa88:1115
finalizeNavigation @ vue-router.esm-bundler.js?v=2018aa88:3194
(anonymous) @ vue-router.esm-bundler.js?v=2018aa88:3067
Promise.then (async)
pushWithRedirect @ vue-router.esm-bundler.js?v=2018aa88:3038
push @ vue-router.esm-bundler.js?v=2018aa88:2966
navigate @ vue-router.esm-bundler.js?v=2018aa88:2093
callWithErrorHandling @ vue.js?v=2018aa88:204
callWithAsyncErrorHandling @ vue.js?v=2018aa88:212
invoker @ vue.js?v=2018aa88:6193
vue.js?v=2018aa88:5960 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (vue.js?v=2018aa88:5960:30)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.js?v=2018aa88:4035:35)
    at ReactiveEffect.run (chunk-ABITFNDB.js?v=2018aa88:399:19)
    at callWithErrorHandling (vue.js?v=2018aa88:204:32)
    at flushJobs (vue.js?v=2018aa88:396:9)

Is this vue bug?

[danielroe]

The original reproduction now longer gives this error, when wrapping <NuxtPage>:

  <template>
+   <div>
      <NuxtPage />
+   </div>
  </template>

See https://codesandbox.io/s/immutable-fast-kv6yh0

[anburocky3]

Yes, I was having my code like this

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

Wrapping the <NuxtLayout> with div fixed the issue.

[Guovin]

@danielroe @anburocky3 I ran into this problem too, adding div wraps to NuxtPage didn't fix it either. Router. push or NuxtLink can be used to jump to the page normally. However, if you jump to the page after refreshing the browser, a parentNode problem will occur. Finally, refresh the browser to display the page.

[anburocky3]

@danielroe @anburocky3 I ran into this problem too, adding div wraps to NuxtPage didn't fix it either. Router. push or NuxtLink can be used to jump to the page normally. However, if you jump to the page after refreshing the browser, a parentNode problem will occur. Finally, refresh the browser to display the page.

Any reproduction steps? Try to upgrade to nuxt3 latest and retry it.

[Guovin]

I'm using the latest version of Nuxt3, which I suspect is due to useLazyAsyncData. When I used Axios, I had 500 errors when I refreshed the page. To solve this problem, I used useLazyAsyncData to get the request data, but after refreshing the page, I couldn't redirect the route.

I'm using the latest version of Nuxt3, which I suspect is due to useLazyAsyncData. When I used Axios, I get a 500 error when I refreshed the page. To solve this problem, I used useLazyAsyncData to get the request data, but after refreshing the page, I couldn't redirect the route.

[Guovin]

@danielroe @anburocky3 I ran into this problem too, adding div wraps to NuxtPage didn't fix it either. Router. push or NuxtLink can be used to jump to the page normally. However, if you jump to the page after refreshing the browser, a parentNode problem will occur. Finally, refresh the browser to display the page.

Any reproduction steps? Try to upgrade to nuxt3 latest and retry it.

Finally, I close SSR and solve this problem.

[potatozerg]

My local works fine, but when I deploy on dev(firebase), I got the same error whenever I route to another page.

[tinegaCollins]

@danielroe @anburocky3 I ran into this problem too, adding div wraps to NuxtPage didn't fix it either. Router. push or NuxtLink can be used to jump to the page normally. However, if you jump to the page after refreshing the browser, a parentNode problem will occur. Finally, refresh the browser to display the page.

Any reproduction steps? Try to upgrade to nuxt3 latest and retry it.

Finally, I close SSR and solve this problem.

i am using nuxt3 but i am still getting this error

[tinegaCollins]

i created a new nuxt application and transferred my files to the new application following the rules from the nuxt3 docs. problem fixed.

[aurendev]

i created a new nuxt application and transferred my files to the new application following the rules from the nuxt3 docs. problem fixed.

how ?

[rvmourik]

i created a new nuxt application and transferred my files to the new application following the rules from the nuxt3 docs. problem fixed.

how ?

make sure when a component like NuxtLayout or NuxtPage is the root-node (first in template) to be wrapped within a div.

[pavloskafritsas]

i created a new nuxt application and transferred my files to the new application following the rules from the nuxt3 docs. problem fixed.

how ?

make sure when a component like NuxtLayout or NuxtPage is the root-node (first in template) to be wrapped within a div.

In my case this bug occurs when switching between pages with different layouts defined in definePageMeta, regardless the parent of NuxtPage element.

[jshimkoski]

Same issue. Wrapping NuxtLayout in a <div> doesn't help.

Dynamic routes in question look like this:

• Parent page: /pages/test/[id].vue
• Child page: /pages/test/[id]/index.vue

Parent page has <NuxtPage :something="something" /> wrapped in a <div>.

I can navigate to the dynamic route twice, then on the third time, I get the [Vue warn]: Unhandled error during execution of scheduler flush. warning and the Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') error.

[tinegaCollins]

try wrapping all the elements on the page in one single element the NUXTlayout should be in the div

[kstraszewski]

I am getting excaly the same error when try to navigate between routes. All my pages have this structure:

[n00kii]

I am also having this error, was there any resolution reached? my pages/ looks like this:

pages
└── [group]
    ├── index.vue
    └── [id].vue

and my app.vue is this: (the <v-xxx> components are of the vuetify library)

<v-app>
    <Header />
    <v-main>
        <v-container class="my-4">
            <NuxtLayout>
                <NuxtPage />
            </NuxtLayout>
        </v-container>
    </v-main>
    <Footer />
</v-app>

When I generate my app (target: static) and try to navigate to a page/[group] from the home page, this error appears and navigation fails. If I then refresh, I can navigate freely across all of my application, until I refresh again while on the home page.

[Fred-grais]

Any news on this? I'm having the same exact error in my Nuxt3 RC 6 app

[adamkasper]

In RC 8 still the same problem

[codeflorist]

apart from this solution provided by @danielroe ...

  <template>
+   <div>
      <NuxtPage />
+   </div>
  </template>

... i found that components having another component as their root-element also was cause of this problem. wrapping these with a html-element (e.g. div) solved the problem for me.

[LynxTR]

Plus,

You can meet with this issue while using nested layouts. You have to append page-key attribute to it.

[michealroberts]

I'm seeing this error with the above solution from @codeflorist in rc-9:

[Vue warn]: Unhandled error during execution of setup function 
  at <RouterView name=undefined route=undefined >
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of null (reading 'parent')

My app.vue component:

<template>
  <div>
    <NuxtPage />
  </div>
</template>

My pages/index.vue component:

<template>
  <div>
    <h1>Index page</h1>
  </div>
</template>

<script setup lang="ts"></script>

That's the only changes I have made to the base rc-9 installation ...

[danielroe]

If you are experiencing this, would you provide a stackblitz reproduction so we can look into it? 🙏

[JFGHT]

I managed to fix it by upgrading and fixing a bunch of dependencies. Too bad I cannot say what my changes were because I lost track at some point.

[NexZhu]

Same issue on rc.8

[NexZhu]

My workaround: fixing vue-router version to 4.0.16

[nikowonde]

@danielroe I made quick repro: https://stackblitz.com/edit/github-zjms7z?file=app.vue which seems to cause similar error I am facing on my project. Clicking any of the links on /page.vue seems to cause it. Not sure if similar problem for others.