Locale switcher has confusing behavior in dev

[start940315]

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

After I chose a language, the locale added to the url one by one. I assumed it to be replaced. For example, my locales is ['en', 'zh-Hant', 'zh-Hans'], the initial url is http://localhost:3000/docu/docs/intro, after I chose zh-Hant then chose zh-Hans, the url became http://localhost:3000/zh-Hans/zh-Hant/docu/docs/intro. And I found currentLocale is not updated.

Reproducible demo

No response

Steps to reproduce

1. start a new repo
2. npm install
3. npm run start
4. change language
5. the lang added one by one, making the url longer and longer

Expected behavior

language url be replaced

Actual behavior

language url added one by one

Your environment

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

Self-service

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

[slorber]

Please provide a repro using Docusaurus.new so I can easily inspect your setup.

It's hard to figure out with text only and it's not very clear to me what this bug is, so any screenshot is also welcome. I don't know what you mean by "language URL added one by one" for example. Please use real examples using real URLs for expected/actual results.

We'll re-open #8651 if the bug report is valid and if the code seems to fix it, and if possible add tests.

[Josh-Cena]

I can reproduce this in dev but not in prod. This is because in dev there's only one locale anyway, so useAlternatePageUtils naïvely believes that we are still in the default locale and tries to prepend the base URL instead of replacing it. I think it's better if we can simply disable the locale switcher in dev. @slorber WDYT? If you are still unsure what the bug is, it's when you are on localhost:3000 with locale en, and you use the locale dropdown to go to zh-Hans, you end up on localhost:3000/zh-Hans, which is non-existent, but the layout still exists, and it still says you are on en, so you use the locale dropdown to go to zh-Hant, and it prepends that to your URL so the URL becomes localhost:3000/zh-Hant/zh-Hans/.

[slorber]

I see thanks, saw that before

Maybe we could add an alert("this does not work in dev") on locale click and prevent the navigation?

That looks better than simply removing the locale dropdown in dev, which might confuse users?

[Josh-Cena]

When I say "disable" I mean have it show the "forbidden" icon when hovered. (We may still show the dropdown content for the purpose of preview).

[slorber]

Yes using forbidden + prevent selection looks like a nice idea

[Code-Milker]

@slorber just to clarify, we should not expect locale switching to work correctly in local environments right? When I attempt to do it locally my docs get a 404, however when I build and serve everything works as expected.

[Josh-Cena]

That's right; in dev we can only start the site in one locale.

[Code-Milker]

ah good to know, spent a couple hours troubleshooting this