Subscribe on changes!

Cannot read property 'parentNode' of null when using Suspense in 3.1.0-beta.6

avatar
May 31st 2021

Version

3.1.0-beta.6

Reproduction link

SFC playground repro

Steps to reproduce

Add a component with async setup throwing an error:

export default defineComponent({
  async setup() {
    throw(new Error('Oops'))
    return { msg: 'comp' }
  }
})

Then use this component in a Suspense with error handling:

<template>
  <div v-if="errorMessage">{{ errorMessage }}</div>
  <Suspense>
    <div>
      <Comp></Comp>     
    </div>
  </Suspense>
</template>

<script>
import { defineComponent, ref, onErrorCaptured } from 'vue';
import Comp from './Comp.vue';
export default defineComponent({
  components: { Comp },
  setup() {
    const errorMessage = ref(null);
    onErrorCaptured(e => {
      errorMessage.value = e.message;
      return false;
    });
    return { errorMessage }
  }
})
</script>

Note the wrapping div around the async component.

What is expected?

It should display the error message without logging an error in the console

What is actually happening?

This throws:

Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null
    at parentNode (VM76 runtime-dom.esm-browser.js:8711)
    at patchBlockChildren (VM76 runtime-dom.esm-browser.js:6124)
    at patchElement (VM76 runtime-dom.esm-browser.js:6092)
    at processElement (VM76 runtime-dom.esm-browser.js:5919)
    at patch (VM76 runtime-dom.esm-browser.js:5836)
    at patchSuspense (VM76 runtime-dom.esm-browser.js:2672)
    at Object.process (VM76 runtime-dom.esm-browser.js:2632)
    at patch (VM76 runtime-dom.esm-browser.js:5845)
    at patchBlockChildren (VM76 runtime-dom.esm-browser.js:6128)
    at processFragment (VM76 runtime-dom.esm-browser.js:6189)

This works fine until beta.5 and works as well if removing the wrapping div element