errors when navigating back and forth from error pages

[danielroe]

reproduction: https://stackblitz.com/edit/github-cmeky2-mysxox

[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 <NuxtRoot>
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')

Context: #13788

[senher]

[DrJume]

A workaround is wrapping the app.vue root component in <template> inside a <NuxtErrorBoundary />:

app.vue:

<script setup lang="ts">
import ErrorPage from './error.vue'
</script>

<template>
    <NuxtErrorBoundary>
        <NuxtLayout>
            <NuxtLoadingIndicator :color="themeColor" />
            <NuxtPage />
        </NuxtLayout>

        <template #error="{ error }">
            <ErrorPage
                :error="error"
                in-error-boundary
                @clear-error="
                    () => {
                        error.value = null
                    }
                "
            />
        </template>
    </NuxtErrorBoundary>
</template>

To be able to clear the error correctly, I needed to create a event to be able to set error.value to null.

[DrJume]

To automatically clear the error, like with normal error.vue behaviour, I use:

onMounted(() => {
  if (props.inErrorBoundary) {
    const router = useRouter()

    router.afterEach(() => {
      console.debug('Manually clearing error in NuxtErrorBoundary')
      emit('clearError')
    })
  }
})

[DrJume]

The problem seems to only happen, because of an async setup (using await) in app.vue.

[DrJume]

Probably assiciated with vuejs/core#6463

[danielroe]

tracking in #13309