Page is not found if the page folder name begins with capital letter

[m19v]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The page is not found and 404 returned to get request when the page folder name starts with capital letter. E.g. /src/pages/Support/ but not as it supposed to be according the documentation /src/pages/support/.

**Note! ** I could not reproduce the error locally and only noticed after e.g. deploying to github pages.

Reproducible demo

No response

Steps to reproduce

1. Create new page: create a new page and name the folder of page with capital letter src/pages/Support/index.js.
2. Build and deploy to e.g. github pages
3. Go to support page
4. Reload the browser with e.g. F5

Expected behavior

Page with its css properties loads

Actual behavior

One notice a short of time 'Page not found' page but then support page loads but with a wrong css properties. In Browser devtool the get request for url /support gets 404

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Hi! URL resolution is defined by your host. When you enter https://example.com/src/pages/support/ into the address bar, you send a GET request to that URL. The host then responds with the data — an HTML page in this case. However, apparently GitHub pages matches the URL case-sensitively, so it returns a 404 page, because it believes that page doesn't exist. Still, the right page is eventually displayed, because our router (which is client-side) is case-insensitive, so it hydrates the page with the right React vdom. Unfortunately, it does so on the 404 HTML, instead of the HTML containing the real DOM, so there's a hydration mismatch, which leads to the wrong CSS styles (I believe it's because the class names are applied to the wrong elements).

There's nothing Docusaurus can do here. GitHub pages is not configurable so you can't let it serve pages case-insensitively. You just need to make sure the links are always written with the correct casing. You would encounter the exact same pitfall with trailing slashes.