Subscribe on changes!

Property change in combination with render function and top level await crashes component

avatar
Nov 25th 2022

Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-nnbt7j?file=src%2Fuse-render-slow-component.js,src%2FApp.vue

Steps to reproduce

Open the stackblitz link and change the input value within 7 seconds.

I already started a discussion https://github.com/vuejs/core/discussions/7202. liulinboyi gave me some workarounds (thanks again), however I am more interested in the actual cause and if I am doing something wrong with the render function or if it is a bug in Vue.

What is expected?

After 7 seconds the current input value should be shown below the input.

What is actually happening?

In the console you will see and error: image

and the component is crashed - nothing will be shown.

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 109.22 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Safari: 16.1

Any additional comments?

No response

avatar
Dec 2nd 2022

the root cause is

// Comp is not an async component.
const { Comp } = useRenderSlowComponent()

see workaround