Instant Loading: External fetch calls break on Firefox

[SaltyAimbOtter]

Context

We use mkdocs-material to build our project's entire homepage. Therefore we have build a customized page that serves as a download page for our builds.
This is achieved with a small JS script that is added to that specific page and fetches the builds from our nexus repository.

Bug description

When instant loading is enabled, fetch calls to external domains fail in Firefox.
The developer console displays Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
The network tab shows NS_BINDING_ABORTED.

The same JS script work fine when instant loading is not enabled.
It always works in Chromium based browsers, no matter if instant loading is enabled.

The only known workaround is to disable instant loading.

Related links

• Reporting a bug
• Instant Loading

There are four open bugs for instant loading since it is scheduled for a rework.
#6345, #6334, #6275, #6102
None of them specifically adress this issue.

I also though about instant loading's quirk that is described in #5925 and in the docs. I don't think it is related though.

Reproduction

9.5.3+insiders.4.48.0-instant-loading-breaks-fetch-firefox.zip

Steps to reproduce

1. Setup the reproduction example
2. Setup a Firefox and a Chromium based browser to work around CORS (our build repo only allows downloads from docs.betonquest.org).

• For the chromium based browser this can be done by starting the browser via CMD: chromium --user-data-dir="/tmp/chromeDeleteMe/" --disable-web-security
• For Firefox I used https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/

3. Open the docs index page with Firefox and a Chromium based browser.
4. Open the developer console in both.
5. Click the Download button.
6. Observe the different behaviour where Chromium successfully downloads the builds but Firefox fails.
7. Disable instant loading
8. Observe that now both browser are able to download the builds.

Check docs/webCode/download.js, the fetch call couldn't get more vanilla than this. It should definitely work.

Browser

Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting. Adding event.stopPropagation(); in your event handler fixes the issue. This means that the event is caught and not propagated up the tree where instant loading can catch it. However, what you're doing in your customization actually confuses instant loading, because:

• You're defining a link with a hash fragment #
• An event handler is mounted on that link and initiates a download
• The hash fragment click propagates up the tree where it somehow confuses instant loading

Two solutions:

1. Use a direct link in Markdown – works perfectly as tested
2. Add event.stopPropagation() before the fetch call

Closing as resolved by customization. This is not something we're canonically optimizing for. However, if you find the problem in instant loading that fixes the issue, you can create a PR and we can discuss merging it.

[squidfunk]

I've tested this again with the latest refactoring of instant navigation in #6662 and it seems we could fix the reported problem as well! We are still waiting for some users to test drive the latest changes on their projects, so we know that we did not introduce new bugs. We're waiting eagerly to release the fixes ☺️ However, there's one problem: your script gets executed every time you navigate to the page, which will lead to:

Uncaught SyntaxError: Identifier 'latestBuild' has already been declared (at download.js:1:1)

To fix this, you should either put all JavaScript code inside:

document$.subscribe(() => {
  // ... all code goes here
})

... or use var instead of const, which will also make your script work. However, the former approach is definitely recommended, as it is how you integrate with instant navigation. We are working on our documentation to make it more apparent how to integrate third-party JavaScript with instant navigation in the coming months. cc @alexvoss

[squidfunk]

I've reopened the issue to signal that we fixed the bug, and that it's awaiting a release.

[squidfunk]

Released as part of 9.5.5.

[SaltyAimbOtter]

Hi Martin,
sorry for the late response. I couldn't look into this until now.
Thanks to your fixes and suggestions everything works now! Thanks a lot! ❤️

We do not use the standard Markdown link syntax because there is much more to this setup. I excluded all of it to make your debugging easier. We essentially build a fancy system that polls our Nexus repo for all available dev builds and releases. The user can easily download them on the docs page. Sometimes, the script also needs to rename the downloaded artifact which is why we create the link in that weird way.