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

Environment

---

• Operating System: Linux
• Node Version: v14.18.1
• Nuxt Version: 3.0.0-27389502.88da719
• Package Manager: yarn@1.22.17
• 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

[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

[codingcn]

I solved this problem by using <client-only></client-only> on the outer layer of sub components