core icon indicating copy to clipboard operation
core copied to clipboard

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

Open stenet opened this issue 3 years ago • 1 comments

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

stenet avatar Nov 25 '22 18:11 stenet

the root cause is

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

see workaround

edison1105 avatar Dec 02 '22 08:12 edison1105

It cannot reproduce anymore in the latest version.see

edison1105 avatar Aug 02 '24 07:08 edison1105