Docusaurus: Problem using direct links (live/prod only)

[bravo-kernel]

Intro

It "looks like" there is a bug in production with direct links/routing(?).

• only occurs on live/production sites
• no errors when running locally using yarn start
• also, all pages used as examples below work fine when accessing them through the site (start at landing page, then click-through using menu of in-site links)

Reproducable Error A

1. Browse to https://pester.dev/docs/commands/Describe

Problem 1: no left side-bar
Problem 2: uppercase Describe is being lowercased

Reproducable Error B

1. Browse to https://pester.dev/docs/contributing/introduction
2. Click on link "How to File an Issue"

Problem: 404 error

Versions

Redux Toolkit uses v0.35 which also has the same problem.

Try browsing to this link https://redux-toolkit.js.org/api/getDefaultMiddleware.

Ping @markerikson

[Victorkangsh]

Same error, the version is 2.0.0-alpha.40.

[markerikson]

Hmmm. Agreed that something is definitely going on with that RTK link, but it seems like only a few pages are being affected. I also tried it with a few Redux core docs pages like https://redux.js.org/api/combinereducers , and they seem to work okay.

If I open that link, I do see the left sidebar very briefly, and then it hides itself.

[bravo-kernel]

Root Cause Found

1. only pages with mixed-case frontmatter id field are affected by this problem
2. only the built/live/production site lowercases URL

This is also why the local version has no issues, the URL does not get lowercased there

Help Needed

I am no pro, especially when it comes to the server side of Docusaurus. Hopefully this is enough information for someone to chip in and help solve this problem ❤️

[lex111]

1. This redirect does your hosting provider. Accordingly, this is not a D2 problem.
2. Use URL with trailing slash only.

When you go to direct links, Docusaurus does not manage this (redirects, trailing slashes), this is a static site, so the requested URL is important here, these problems depends on hosting platforms you use.

Try installing this package locally https://www.npmjs.com/package/serve, build a website and run the serve /build command - everything will become clearer.

[bravo-kernel]

Thanks for explaining this @lex111, I will invest the time to make this clear/learn.

It would be great if this is indeed a hosting issue (Netlify in this case).

[bravo-kernel]

:scream: https://community.netlify.com/t/my-url-paths-are-forced-into-lowercase/1659

[bravo-kernel]

@lex111 thank you for helping us out here ❤️. Looking at this I guess the only real solution for Netlify users would be using lowercase ids.

I will do some testing and if I can confirm, will propose a documentation PR advizing users to use lowercase ids to prevent issues with e.g. Netflify.

[lex111]

@bravo-kernel although maybe this is still a D2 problem, since our blog entry looks similar - https://v2.docusaurus.io/blog/2018/04/30/How-I-Converted-Profilo-To-Docusaurus -> https://v2.docusaurus.io/blog/2018/04/30/how-i-converted-profilo-to-docusaurus/ (redirect by Netlify)

And it works OK. I will try to do something with this, in the end we need to "simple" bring back the doc sidebar. But my personal opinion is that this kind of problem is the responsibility of the end-user (and its hosting provider). I do not promise, but I will try to do a workaround for this. (after all, I'm not pro either :smile:)

[lex111]

@bravo-kernel I have created PR https://github.com/facebook/docusaurus/pull/2235. This patch should show the doc sidebar when going to the wrong URL path.

[bravo-kernel]

Copied from a Netlify notification email:

Will this impact my SEO?

No. Forwarding traffic to a new domain extension using a 301 redirect is a proven technique that search engines are well aware of. Your inbound links will not be affected. Your search engine rankings will not be affected.

[bravo-kernel]

Confirmed as fixed in 2.0.0-alpha.41. Thanks @lex111 👏

[markerikson]

Can you clarify what the actual fix is?

I was seeing the issue with a Redux Toolkit alpha API page yesterday, and tried deploying alpha.41. Afterwards, it looked like the behavior was basically the same. The left sidebar flashes briefly, then disappears.

Example link:

https://deploy-preview-352--redux-starter-kit-docs.netlify.com/api/createEntityAdapter

[bravo-kernel]

Are you sure you are running .41.

In my case the above mentioned PR now adds the sidebar when netlify redirects

https://docusaurus-powershell.netlify.com/docs/commands/New-DocusaurusHelp

to

https://docusaurus-powershell.netlify.com/docs/commands/new-docusaurushelp/

[markerikson]

Hmm.

I coulda sworn I did merge in alpha.41 last night, but I was also doing it at 2 AM, and I see alpha.40 at the tip of the current PR branch I'm working on:

https://github.com/reduxjs/redux-toolkit/blob/9842933e6a04d7ad83ef32911129b25f0798ba53/website/package.json

Lemme check this again this evening and confirm.

[bravo-kernel]

OK, I am seeing some issues with css not loading in the lowercase version atm but that could be my local browser.

You might be able to reproduce if you open a new browser window and then pasting my lowercased URL https://docusaurus-powershell.netlify.com/docs/commands/new-docusaurushelp/

[bravo-kernel]

Not happening when opening a private window.

[markerikson]

Yeah, this does not appear to be solving the problem for the Redux Toolkit docs. Example as of right now, on alpha.41:

https://deploy-preview-352--redux-starter-kit-docs.netlify.com/api/createAsyncThunk

And the deployed package.json for that PR preview:

https://github.com/reduxjs/redux-toolkit/blob/a0aeacef0e55bc0fdf9c1135d5175bcd3feed821/website/package.json

To make things worse, alpha.41 appears to be breaking column widths on some of the pages, with the content column filling the entire page, and the right-hand page TOC being shoved to the bottom.

[lex111]

@markerikson I just made a small fix and deployed your website, so everything should be OK https://hardcore-hermann-669593.netlify.com/api/getdefaultmiddleware/

[bravo-kernel]

@lex111 I can only speak for my own website but v43 solved all issues. Thanks for the quick fix 💯

[markerikson]

This is still somehow _not_ working right, at least on a specific PR branch.

This version, from the PR that added .43, works fine:

https://deploy-preview-369--redux-starter-kit-docs.netlify.com/api/getdefaultmiddleware/

I merged that PR to master, and then merged master into a larger WIP PR with code changes. However, _that_ version does _not_ work okay even after I merged in .43:

https://deploy-preview-352--redux-starter-kit-docs.netlify.com/api/getdefaultmiddleware/

Why are these not behaving the same?

[markerikson]

Scratch that last comment.

I just tried clearing the Netlify cache and forcing a redeploy, and _now_, finally, the PR 352 preview link looks correct:

https://deploy-preview-352--redux-starter-kit-docs.netlify.com/api/getdefaultmiddleware/

• Sidebar on left side even though we went straight to the page URL
• Page TOC on the right side
• Content is the correct width

So, I'm going to claim this is indeed good to go now.

Thanks for poking at this enough to fix things!

[bravo-kernel]

Netlify users: make sure to disable PrettyURLs (to prevent lowercased-URL 301 redirects and added-trailing-slash 404 errors). See https://github.com/facebook/docusaurus/issues/2394#issuecomment-599039072