defineAsyncComponent onError
Vue version
3.2.45
Link to minimal reproduction
https://github.com/nestle49/FoodSoul
Steps to reproduce
For reproduction:
- Install packages yarn && yarn dev
- Inside src/pages/MainPage.vue change params inside in this line on non-exist, for example 'Test2' const { dynamicLoadComponent } = useDynamicLoadComponent('Test');
- Refresh page -> infinity loading
If remove onError, SPA working fine
For any projects:
- Create SPA with vue & vite ssr;
- Create dynamically component with defineAsyncComponent;
- 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
This is bad april joke? Should we take a few years off the project until this is fixed? @yyx990803 @LinusBorg
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.
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.
So, here's what can halfway solve the issue in my quick experiment so far:
- make sure you provide an
errorComponent
and - call
fail()
in theonError
callback:
errorComponent: () => h('div', {}, 'Error!'),
onError: async (error, retry, fail) => {
console.error(error);
fail();
}
- 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.
- 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.