Why select locale show 404 / cause URL repeat

[Alceatraz]

For someone in futute: Here is answer

First: Make sure you are import the right package import Translate from '@docusaurus/Translate';

Second: I18n select not working in dev mode, foobar/some-locale will generate only in build command

---

Here is original post:

Use showcase as standard implements, When I try to wrote my own i18n site, Something went wrong:

Question1: How to single index?

Select locale from dropdown will redirect to suffix foobar.com/fr/ for example.

Question1: In showcases website, There is only one index ( No src/pages/fr/index.tsx ). How to do that? In default generated project, That will cause 404.

Question2: I also tried create sub directory and copy index.tsx, But ff I select again and again will cause URL become foobar.com/fr/fr/fr/fr/fr/fr/fr/fr/fr/fr/ and cause page 404. How to prevent that?

src
  pages
    fr
      index.tsx
    index.tsx

Question3: Translate component not working

Continue with Question2, I create src/pages/fr/index.tsx as temporary work around. Then use Translate component for i18n :

export default function Home(): React.JSX.Element {
  return (<Translate id='homepage.welcome'/>)
}

Use write-translates --locale fr will create code.json, But homepage.welcome not show in it and manual add not working.

{
  "homepage.welcome": {
    "message": "Welcome to foo bar"
  }
}

Question3: Why my write-translates and manual append not working?

BTW: I think its pretty static, According to the text labels must be static section

Question 4: What is the best practice ?

I need:

• Only one index file instead multi sub folder
• Use Translate component for tsx/mdx instead multi sub folder

AFAIK, Multi sub folder equivalent to access different website, I don't think that's real i18n.

[slorber]

You are not supposed to have src/pages/fr/index.js, you just need to build your site in multiple locales. As documented, this only works in prod mode (not npm start)

I can't help more if you don't share a repro sorry. Show me actual code I can run, what you want, and what you see, and I'll tell you how to fix your code.

[Alceatraz]

I see. I do read Deploy your site section but I didn't realized I MUST build it for preview.

---

I create a blank project with npx create-docusaurus@latest. With TS classical option. And follow this guide

Modify docusaurus.config.ts

i18n: {
  defaultLocale: 'en',
  locales: [
    'en',
    'fr',
  ],
},

Modify index.tsx

import React from "react";
import Layout from '@theme/Layout';
import Translate from "@docusaurus/core/lib/client/exports/Translate";

export default function Home(): React.JSX.Element {
  return (
    <Layout title='Demo'>
      <Translate id="homepage.hero.title">Welcome to website</Translate>
    </Layout>
  );
}

Then docusaurus write-translations --locale fr

It says

[INFO] 77 translations will be written at "i18n/fr/code.json".
[INFO] 4 translations will be written at "i18n/fr/docusaurus-theme-classic/navbar.json".
[INFO] 10 translations will be written at "i18n/fr/docusaurus-theme-classic/footer.json".
[INFO] 3 translations will be written at "i18n/fr/docusaurus-plugin-content-blog/options.json".
[INFO] 4 translations will be written at "i18n/fr/docusaurus-plugin-content-docs/current.json".

But it not exist in any where.

Then I try manual add it into code.json It's work. But I think it should be automatically?

The docusaurus write-translations command will statically analyze all React code files used in your site, extract calls to these APIs, and aggregate them in the code.json file.

[slorber]

import Translate from "@docusaurus/core/lib/client/exports/Translate";

You are not supposed to import from that path. It will be forbidden in the future. Probably the problem.

For me to help, it's better to share a runnable repro, not just code samples

[Alceatraz]

import Translate from "@docusaurus/core/lib/client/exports/Translate";

You are not supposed to import from that path. It will be forbidden in the future. Probably the problem.

For me to help, it's better to share a runnable repro, not just code samples

That's a petty silly mistake I auto import it by IDE. Thank you for your patience. I will make a update for question.