defineAsyncComponent onError retry function wont reload component

[adnovikov]

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

[jh-leong]

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.

[edison1105]

Close as not related to vue-core