`defineAsyncComponent` onError `retry` function wont reload component
adnovikov opened this issue · comments
Vue version
3.4.31
Link to minimal reproduction
https://github.com/adnovikov/defineAsyncComponent-issue/blob/main/src/App.vue#L21
Steps to reproduce
- Turn off the internet connection.
- Press the "Click me" button to trigger dynamic component loading.
- Turn on the internet connection.
Hello,
In my Vue app, I need to implement retry functionality for my dynamic components in case the client has internet connection problems and the component doesn't load the first time. According to the documentation, Vue provides an onError
callback for defineAsyncComponent
where I can call the retry
function and reload the component from the server.
When I disable the internet connection and trigger component loading, it fails into the onError
callback as expected. But when I enable my internet connection and call retry
, the component still fails into onError
and doesn't reload as expected.
Here is also a live example of a minimal reproduction: https://defineasynccomponent-issue.netlify.app/
Thank you for your help!
What is expected?
defineAsyncComponent
call onError
callback if it cant load component.
defineAsyncComponent
reload component properly if retry
function called and there is no any connecton problems
What is actually happening?
defineAsyncComponent
didnt reload component properly if retry
function called and there is no any connecton problems
System Info
System:
OS: Windows 11 10.0.22631
CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
Memory: 8.60 GB / 31.91 GB
Binaries:
Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 9.4.0 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Chromium (126.0.2592.87)
Internet Explorer: 11.0.22621.3527
npmPackages:
vue: ^3.4.31 => 3.4.31
Any additional comments?
No response
In your case:
loader: () => import('./components/HelloWorld.vue')
When the browser fetches a file, it caches the response regardless of whether it succeeds or fails. Therefore, each time you call retry (recalling the loader), it won’t initiate a new network request. Instead, it will immediately return the cached response. If the initial fetch fails, it will continue to return the failed response.
For more information, see this issue: whatwg/html#6768.
Close as not related to vue-core