bug: useAlternatePageUtils generates the wrong links in LocaleDropdownNavbarItem when baseUrl is "/docs/"

[thetaPC]

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 repro was recently upgraded to the latest v2. It's been noticed that the link to the JP site is broken since it’s now directing to https://ionicframework.com/docs/ja//docs (note the /docs at the end). This issue is happening to all the links within LocaleDropdownNavbarItem and only in production.

The baseUrl in docusaurus.config.js has been set to /docs/. The repro is being hosted on Vercel. Lastly, this is only happening if the URL does not have a trailing slash.

The extra /docs is being appended through the useAlternatePageUtils.

getLocalizedBaseUrl returns /docs/ja and then pathnameSuffix is still /docs which is why I get the extra /docs at the end.

The generated links are:
EN: /docs//docs
JP: /docs/ja//docs

repro: https://ionicframework.com/docs
GitHub: https://github.com/ionic-team/ionic-docs

Reproducible demo

https://github.com/ionic-team/ionic-docs

Steps to reproduce

1. Navigate tohttps://ionicframework.com/docs (no trailing slash)
2. Hover over JP within the locales dropdown
3. Notice that the browser URL preview is /docs/ja//docs
4. Switch to JP
5. Notice the URL has an extra docs: https://ionicframework.com/docs/ja/docs
6. Navigate to https://ionicframework.com/docs/ (includes trailing slash)
7. Hover over JP within the locales dropdown
8. Notice that the browser URL preview is /docs/ja/
9. Switch to JP
10. Notice the URL does not have an extra docs: https://ionicframework.com/docs/ja/

This also happens for EN:

1. Navigate tohttps://ionicframework.com/docs (no trailing slash)
2. Hover over EN within the locales dropdown
3. Notice that the browser URL preview is /docs//docs
4. Switch to EN
5. Notice the URL has an extra docs: https://ionicframework.com/docs/docs
6. Navigate to https://ionicframework.com/docs/ (includes trailing slash)
7. Hover over EN within the locales dropdown
8. Notice that the browser URL preview is /docs/
9. Switch to EN
10. Notice the URL does not have an extra docs: https://ionicframework.com/docs/

(This can't be reproduced locally)

Expected behavior

I expect the locales links to not include an extra docs regardless if there's a trailing slash or not.

The generated links should be:
EN: /docs
JP: /docs/ja

Actual behavior

The locales links add an extra docs.

The generated links are:
EN: /docs//docs
JP: /docs/ja//docs

Your environment

• Public source code: https://github.com/ionic-team/ionic-docs
• Public site URL: https://ionicframework.com/docs/
• Docusaurus version used: v2.4.3
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome, Safari, Firefox
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

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

[Josh-Cena]

Do you have trailingSlash configured? If not, maybe try adding one?

[thetaPC]

We don't have trailingSlash configured because Vercel has a strong preference for no trailing slashes. We did try to set it to trailingSlash: false in docusaurus.config.js while debugging but it still rendered the wrong links.

[Josh-Cena]

You should definitely choose either trailingSlash: false or trailingSlash: true, right. Both are different from not specifying trailingSlash at all. However, based on https://github.com/slorber/trailing-slash-guide, I think it's equally feasible to make Vercel work with either.

Thanks for the clear repro. If I have time, I'll check this later. Otherwise someone else might as well.

[slorber]

Hmmm, this is not the first time we see issues like this.
Some past refs that might be helpful:

• There's no way to remove the trailing slash from baseUrl #8868
• SEO: hreflang alternate link wrongful destination if baseURL contains defaultlocale. #6462

---

Serving build/index.html from /docs instead of /docs/ isn't a good idea. To do so we would have to emit build/../docs.html instead of build/index.html, and we can't really emit static files outside of the build folder.

When you navigate back to your homepage the trailing slash is there this time (as Docusaurus expects) and the issue does not happen.

---

Note, you have rewrites/redirects on your Vercel config here: https://github.com/ionic-team/ionic-docs/blob/main/vercel.json

It's difficult for me to figure out the purpose of this config:

{
  "redirects": [
    { "source": "/", "destination": "/docs" }
  ],
  "rewrites": [
    { "source": "/docs", "destination": "/" },
    { "source": "/docs/:match*", "destination": "/:match*" }
  ]
}

And this could be the cause of your problem.

I can't really troubleshoot this for you, but I'm pretty sure the issue is that you shouldn't serve your site from /docs but from /docs/ instead.

And apparently you altered the default Vercel behavior and made it unable to serve it from /docs/

CF my resource here:
https://github.com/slorber/trailing-slash-guide

It shows that Vercel by default is able to serve folder/index.html from /folder/, while your deployment redirects to /folder

---

My intuition is that your Ionic website is an assembly of multiple Vercel deployments at CDN level. I mean your main site and your docs are not the same Vercel deployment right?

This makes it even more complicated to troubleshoot for me because it's a quite advanced setup and I only see a part of it.

My recommendation would be to try to deploy your docs to a brand new Vercel deployment, without any Vercel config or fancy setup. If it works, then Docusaurus is not the problem, but your custom setup is.

I'm pretty sure this is the case because your deploy previews are able to serve from /docs/ and do not redirect to /docs (unlike prod)

• This fails (redirect): https://ionicframework.com/docs/
• This works (no redirect): https://ionic-docs-git-renovate-react-monorepo-ionic1.vercel.app/docs/