mkdocs-material: Instant navigation breaks third-party URLs

  • I’ve read the [contribution guidelines][1] and agree with them

I’ve found a bug and checked that …

  • … the problem doesn’t occur with the default MkDocs template
  • … the problem is not in any of my customizations (CSS, JS, template)
  • … the documentation does not mention anything about my problem
  • … there are no open or closed issues that are related to my problem

Description

Enabling navigation.instant modified Isso requests URLs on first load. A page reload restores them.

Expected behavior

Requests are sent to usual URLs

Actual behavior

Requests are sent to a non existent URL

Steps to reproduce the bug

My website has https://example.org/mkdocs/ set as site_url and loads on every page the following Isso code:

{% block disqus %}
 {% if not page.is_homepage %}
  <script data-isso="https://example.org/comments" src="https://example.org/comments/js/embed.dev.js"></script>
  <section id="isso-thread"></section>
 {% endif %}
{% endblock %}

The file embed.dev.js is the minified version of this attached file: embed.dev.js.txt. It generates URLs from the “data-isso” attribute.

Without navigation.instant, comments are properly loaded:

  • First load
Code Method URL
200 GET https://example.org/mkdocs/PAGE
200 GET https://example.org/comments/js/embed.dev.js
200 POST https://example.org/comments/count
200 GET https://example.org/comments/?uri=PAGE&nested_limit=5
  • Page Reload
Code Method URL
200 GET https://example.org/mkdocs/PAGE
200 GET https://example.org/comments/js/embed.dev.js
200 POST https://example.org/comments/count
200 GET https://example.org/comments/?uri=PAGE&nested_limit=5

I noticed that by enabling navigation.instant the request URLs appear modified (XHR interceptor?), but only at the first load of the page.

A user has has in fact to press F5 everytime he changes page, otherwise he will see the comment section, but he won’t be able to create or load comments.

  • First load
Code Method URL
200 GET https://example.org/mkdocs/PAGE
200 GET https://example.org/comments/js/embed.dev.js
404 POST https://example.org/assets/javascripts/bundle/count
404 GET https://example.org/assets/javascripts/bundle/?uri=PAGE&nested_limit=5
  • Page reload
Code Method URL
200 GET https://example.org/mkdocs/PAGE
200 GET https://example.org/comments/js/embed.dev.js
200 POST https://example.org/comments/count
200 GET https://example.org/comments/?uri=PAGE&nested_limit=5

I have tried with clean MkDocs directories multiple times and the problem always (and only) appears when enabling instant navigation.

Package versions

  • Python: 3.9
  • MkDocs: 1.1.2
  • Material: 7.0.0

System information

  • OS: any
  • Browser: any

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 20 (15 by maintainers)

Commits related to this issue

Most upvoted comments

b6779114 now preserves all attributes of the script tag. This might fix the issue.

Before we proceed, it’s necessary to provide a reproducible example.

Here’s the same zip I mailed you, also in case @polarathene would like to give it a try: material-isso.zip

Please go back and forth between “home” and “test”, so you can see the actual behaviour. By reloading a page you will see that the error is gone. The file javascript file of the “src” attribute is always loaded properly, the URLs that are modified are the ones generated by that file.

  • First load: first-load

  • Page reload: reload

@polarathene they are not properly equal because they appear to the browser as different origin. I whitelisted 127.0.0.1 because I thought he was going to use the URL printed by mkdocs serve, which I used to reproduce the issue locally, but he only tried from localhost (which he must have wrote manually in his browser) so he got the CORS issue. I then added “localhost” to the list of allowed origins, but he closed the issue and decided to not retry.

The first time I also sent him two other links to demos with or without instant navigation, so he could also see the wrong redirection to /assets/javascripts/bundle/count instead of /comments/count directly from the server, but he decided to gave up before even opening them.

Perhaps the fix is just to have the option to configure a filter or exclusion list

It could be, but my suggestion would be applying this behaviour only to a restricted lists of mkdocs/mkdocs-material generated URLs, like /assets/javascripts/bundle and /assets/stylesheets, in order to not interfere with URLs generated from other javascript files.

For instance, you can see from the file I attached in my first post that endpoint + "/count" is used, but somehow the final URL gets modified to /assets/javascripts/bundle/count only the first time a page is loaded if instant navigation has been set. If I refresh the page or disable instant navigation, the problem is gone.

If he doesn’t care about reopening this issue, I’ll stick with instant navigation off.

Thanks for your email. However, this is just a bare repository which doesn’t run locally due to CORS issues (see screenshot below). I’m very sorry but I cannot invest too much time into problems with third-party integrations that are not officially supported by Material for MkDocs. If you manage to isolate the problem or provide a fix, I’m happy to merge it, but for now, I have to consider this a problem with customization. Thus I’m closing this issue.

Bildschirmfoto 2021-02-25 um 16 01 07

Unfortunately, it’s impossible for me to debug without a working example. If you could provide a fully self-contained repository, which I can check out, pip install and mkdocs serve, I may look into this, but note that I don’t have an account for Isso. You can also investigate this yourself and PR, if you manage to find the reason for this. Note that instant loading will evaluate all script tags that are part of the container component:

https://github.com/squidfunk/mkdocs-material/blob/d6317dc51494309c7b09d4d80fa4611f1e6dc188/src/assets/javascripts/integrations/instant/index.ts#L294-L319

If you don’t wish to proceed on this, another option is just to disable instant loading. We can only guarantee that it works without customizations after all, there are just too many possibilities.