docusaurus: Using `trailingSlash: false` on GH-pages causes the root page to flash "Not Found"

🐛 Bug Report

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

Using trailingSlash: false on GH-pages causes the root page to flash “Not Found”

Have you read the Contributing Guidelines on issues?

Yes.

Steps to reproduce

1. Create a new project with npx @docusaurus/init@latest init trailing-bug classic
2. Configure the project for GH-pages and set trailingSlash: false in docusaurus.config.js
3. Deploy
4. Visit the root, e.g. https://{organizationName}.github.io/{projectName}/

Expected behavior

The home page should be displayed without flashing.

Actual behavior

The home page should be displayed after flashing “Not Found” route.

Your environment

• Public source code: https://github.com/jsamr/docusaurus-trailing-slash
• Public site URL: https://jsamr.github.io/docusaurus-trailing-slash/
• Docusaurus version used: Tested both 2.0.0-beta.2 and canary (2.0.0-beta.4d93c894f)
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Mozilla Firefox 89.0, Nodejs v14.16.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Manjaro Linux, kernel 5.9.16-1-MANJARO

Reproducible demo

https://github.com/jsamr/docusaurus-trailing-slash

Below is a slowed-down screencast I recorded for the original project where I encountered this issue (react-native-render-html).

https://user-images.githubusercontent.com/3646758/123675487-287d1480-d819-11eb-8c22-be842b76b0ce.mp4

Additional Notes

Variants

Visiting https://{organizationName}.github.io/{projectName} instead of https://{organizationName}.github.io/{projectName}/ will cause a redirect to https://{organizationName}.github.io/{projectName}/ with the same flashing issue.

Workaround

I noticed that if I added a build step to copy docusaurus-trailing-slash.html into index.html, the flashing would not occur anymore. Below is an example of plugin to do just that:

const path = require('path');
const fs = require('fs/promises');

// quick fix for GH pages trailing slash in root issue
async function fixIndex({ outDir, baseUrl, siteConfig: { url, projectName } }) {
  // Don't proceed if baseUrl is not defined
  if (!baseUrl) {
    return;
  }

  const rootFile = path.join(outDir, projectName + '.html');

  // copy baseurl file to index
  if ((await fs.stat(rootFile)).isFile()) {
    await fs.copyFile(rootFile, path.join(outDir, 'index.html'));
  }
}

module.exports = function () {
  return {
    plugin: 'doc-docusaurus-ghpages-plugin',
    async postBuild(props) {
      await fixIndex(props);
    }
  };
};