Subscribe on changes!

defineAsyncComponent onError

avatar
Feb 6th 2023

Vue version

3.2.45

Link to minimal reproduction

https://github.com/nestle49/FoodSoul

Steps to reproduce

For reproduction:

  1. Install packages yarn && yarn dev
  2. Inside src/pages/MainPage.vue change params inside in this line on non-exist, for example 'Test2' const { dynamicLoadComponent } = useDynamicLoadComponent('Test');
  3. Refresh page -> infinity loading

If remove onError, SPA working fine

For any projects:

  1. Create SPA with vue & vite ssr;
  2. Create dynamically component with defineAsyncComponent;
  3. Use onError callback inside defineAsyncComponent on ssr;

Crash application with error on server side: Error: [vite-plugin-ssr@0.4.68] Hook timeout: the render() hook of /renderer/_default.page.server.ts didn't finish after 40 seconds

On client side everything is fine

What is expected?

SPA works with ssr

What is actually happening?

Error: [vite-plugin-ssr@0.4.68] Hook timeout: the render() hook of /renderer/_default.page.server.ts didn't finish after 40 seconds

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 327.75 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
Browsers:
    Chrome: 109.0.5414.119
    Firefox: 106.0.1
    Safari: 16.1
npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

No response

avatar
Feb 21st 2023

@yyx990803 Can u comment, please?

avatar
Mar 17th 2023

@yyx990803 still relevant

avatar
Mar 17th 2023

I confirm problem and also waiting for solution

avatar
Mar 29th 2023

@yyx990803 Can we expect to fix at least critical problems of core in the near future?

avatar
Mar 30th 2023

This is bad april joke? Should we take a few years off the project until this is fixed? @yyx990803 @LinusBorg

avatar
Mar 31st 2023

stillwaiting

avatar
Mar 31st 2023

images

avatar
Mar 31st 2023

still-waiting

avatar
Mar 31st 2023

pic2657282

avatar
Mar 31st 2023

67c531357ca93fa0d803c6e0db05c447

avatar
Mar 31st 2023

I understand you are waiting for a resolution. But if you keep this up you will be banned from the vuejs org. This is your fierst and final warning.

avatar
Mar 31st 2023

This user has now been blocked for 7 days.

We will still investigate and fix this issue once we have the capacity for it.

As a workaround for other people, consider conditionally adding this callback on on the client.

If you need it on the server, please describe the specific use case.

avatar
Mar 31st 2023

have same issue @LinusBorg

avatar
Mar 31st 2023

Can you provide any more info about your use case?

avatar
Mar 31st 2023

So, here's what can halfway solve the issue in my quick experiment so far:

  1. make sure you provide an errorComponent and
  2. call fail() in the onError callback:
errorComponent: () => h('div', {}, 'Error!'),
onError: async (error, retry, fail) => {
    console.error(error);
    fail();
}
  1. if the error component is missing, the server will send an error response because of an now unhandled error. This can be avoided by adding a global error handler or an error boundary in a parent component.
  2. if you don't call fail(), it will hang forever

it's the second part I am not sure how it should behave right now, if fail()would be mandatory to call on the server. We lack documentation for that feature.