Component cached even on a failed network request (vue-router v4.3.2)

[piyush-bhatt]

Reproduction

https://codesandbox.io/p/sandbox/async-cookies-dgnrgh

Steps to reproduce the bug

1. Click on Foo in the list. It should trigger a network call and navigate to /foo on success with Foo displayed on the page
2. Toggle network offline
3. Click on Bar. It should trigger a network call but fail to navigate to /bar as the network call should fail
4. Toggle network online
5. Click on Bar again

Expected behavior

Since the initial request to fetch Bar had failed, the component for route shouldn't be cached and a network request should be triggered again to fetch the component.

The component should only be cached on a successful fetch.

Actual behavior

A network call to fetch component Bar is not triggered again since the initial request to fetch Bar had failed and hence the content for the route /bar can't be displayed anymore without refreshing the whole app

vue-router documentation states the following

The component (and components) option accepts a function that returns a Promise of a component and Vue Router will only fetch it when entering the page for the first time, then use the cached version.

But it seems that the component is cached even on a failed fetch.

Additional information

No response

[posva]

The router is not caching the failed request, something else is. If you put a breakpoint into the navigation cycle, you will see that the router will try the function every time:

[piyush-bhatt]

Thanks for pointing me in the right direction. After some debugging, it turns out that the issue was with the browser's caching behaviour for dynamic modules

Here is an open issue for anyone who faces the same problem, with cache-busting as a workaround