2

I recently deployed our Docusaurus site for the first time and I am running into a weird issue with routing.

Every page in the /docs folder will briefly render the 404.html page when hitting the page directly. However, if I click around in sidebar the pages render properly.

This only happens in the /docs folder. If I click on the home page link I do not see the 404.

I cannot replicate this issue locally. I have tried both yarn start and yarn build/serve and in both cases the app works fine. I do not see any 404s, console errors, etc. The response payload of the 404 is the OOTB Docusaurus page, I have not done any customization to it or how its handled.

Attached is a gif showing the behavior and a screen shot showing that the browser is seeing a hard 404 in my non-localhost environment.

enter image description here

enter image description here

And here's my config file:

// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
    title: 'Guidebook',
    tagline: 'Engineering Information',
    url: 'https://guidebook.our-internal-domain.tools/',
    baseUrl: '/',
    onBrokenLinks: 'throw',
    onBrokenMarkdownLinks: 'throw',
    favicon: 'img/favicon.png',
    organizationName: 'Guidebook',
    projectName: 'Guidebook',

    presets: [
        [
            'classic',
            /** @type {import('@docusaurus/preset-classic').Options} */
            ({
                docs: {
                    sidebarPath: require.resolve('./sidebars.js'),
                    editUrl: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook'
                },
                blog: false,
                theme: {
                    customCss: require.resolve('./src/css/custom.css')
                }
                // debug: true
            })
        ]
    ],
    themeConfig: {
        navbar: {
            title: 'Home',
            logo: {
                alt: 'Home',
                src: 'img/TechnologyGuidebook-Icon_Red_Small.svg'
            },
            items: [
                {
                    type: 'doc',
                    docId: 'intro',
                    position: 'left',
                    label: 'Guidebook'
                },
                {
                    href: 'https://git.our-internal-domain.com/tech-standards/tech-guidebook',
                    label: 'GitHub',
                    position: 'right'
                }
            ]
        },
        footer: {
            style: 'dark',
            links: [
                {
                    title: 'Community',
                    items: [
                        {
                            label: 'Stack Overflow',
                            href: 'https://stackoverflow.com/questions/tagged/docusaurus'
                        }
                    ]
                },
                {
                    title: 'More',
                    items: [
                        {
                            label: 'GitHub',
                            href: 'https://github.com/facebook/docusaurus'
                        }
                    ]
                }
            ],
            copyright: `Copyright © ${new Date().getFullYear()} Guidebook V2, Inc. Built with Docusaurus.`
        },
        prism: {
            theme: lightCodeTheme,
            darkTheme: darkCodeTheme
        }
    }
};

module.exports = config;
Lane Goolsby
  • 594
  • 1
  • 8
  • 26

2 Answers2

1

I am using Vercel to deploy a Docusaurus V2 website and was running into the same issue with redirects.

Fixed this issue by enabling cleanUrls inside my vercel.json config.

heavyweight
  • 88
  • 2
  • 8
0

I figured it out. It wasn't a Docusaurus problem. The problem was a configuration issue in our CloudFront infrastructure.

Lane Goolsby
  • 594
  • 1
  • 8
  • 26
  • 1
    Hi, could you please elaborate on this configuration issue? I'm having the exact same problem when deploying to Vercel (without any DNS proxy). – Loris Leiva Jun 30 '22 at 12:52
  • 1
    tl;dr, there are specific settings in CloudFront on how to handle trailing slashes. We needed to fiddle with those settings. https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LinkFormat.html – Lane Goolsby Jun 30 '22 at 17:11
  • 1
    There's also a section on trailing slashes in the Docusaurus docs https://docusaurus.io/docs/deployment#trailing-slashes – Lane Goolsby Jul 01 '22 at 01:56
  • @LaneGoolsby I'm suffering this problem deploying on Github Pages. My `trailingSlash` is set to false. Did you solve it by changing it to true? – jrub Apr 12 '23 at 08:29
  • 1
    Yes. The url is 'https://yadda.com', the baseUrl is '/pages/gitOrg/gitRepo/', and trailingSlash is true. – Lane Goolsby Apr 12 '23 at 19:43