When served locally, sometimes chapters load without the `.html` extension, causing 404

[croian]

Problem

Here is my SUMMARY.md file:

# Summary

[How to use these docs](introduction.md)

# User guide

- [Getting started](getting_started.md)
- [Using Mouseless](using_mouseless.md)
- [Customizing Mouseless](customizing_mouseless.md)
- [Keybindings / command reference](keybindings.md)
- [Troubleshooting](troubleshooting.md)

# Other

- [Roadmap and Known Issues](roadmap_and_issues.md)

I triple check that the filename getting_started.md is correct, but when I run mdbook serve --open, and click the 'Getting started' link there is no .html at the end of the url in the address bar (though it appears in the preview text when I hover on the link, see screenshot), and I get a 404 page. Other pages work fine.

I've disabled [additional-js] in my .toml file, rebuilt and restarted, and still have the issue.

If I change the filename and ref (in SUMMARY.md) to a.md or a_started.md, then it works as expected.

Also, it appears to work fine once I actually deploy the files to production / live environment: https://mouseless.click/docs/

Steps

No response

Possible Solution(s)

No response

Notes

No response

Version

mdbook --version
mdbook v0.4.52

(also seen on v0.4.49, before I updated)

[croian]

Actually, I went back to double check that changing the filename to e.g. a_started.md makes it work as expected, and then it had the same problem as getting_started.md, AND the using_mouseless page then also had the same issue; no .html, and a 404. So the problem may not be the filename at all, and seems to not be deterministic based on the project contents.

[szabgab]

Thanks for reporting.
I could not reproduce this, but as I understand it does not always happen to you either.
Could you also share the book.toml file, please?
Which OS and browser do you use?

[croian]

@szabgab Sure thing. book.toml:

[book]
authors = ["croian"]
language = "en"
src = "src"
title = "Mouseless"

[output.html]
additional-js = ["custom.js"]
additional-css = ["custom.css"]

I'm using Brave Browser (up to date), on MacOS 15.5.

For extra context, my custom.css and custom.js:

.content a {
  text-decoration: underline;
}

// Add home link to sidebar
document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.querySelector('ol.chapter');
    if (sidebar) {
        const homeLink = document.createElement('li');
        homeLink.innerHTML = '<a href="https://mouseless.click" style="display: block; margin-bottom: 10px; text-decoration: none; color: #888888; font-weight: bold; ">← Back to mouseless.click</a>';
        sidebar.insertBefore(homeLink, sidebar.firstChild);
    }
});

And my project structure: