Translations API only seems to be working for "src/pages" directory

[JohnnyBoy2103]

🐛 Bug Report

I'm currently working on a project that uses Docusaurus v2 to generate documentation pages. We've been following the updates regarding the i18n functionalities to be released in 2.0.0-alpha.71 (as per the documentation).

Our site needs to be available at multiple languages (the default locale is portuguese, but it should support at least english and spanish), and so, we've followed the tutorial on Docusaurus website that gives some details on how to setup the project (specially considering directories structure) for multiple languages and how to use the translation APIs.

As of the current release (2.0.0-alpha.70), the i18n functionalities are not entirely available, so we decided to use the @canary tag until the next release comes out, in order to begin using and checking the i18n functionalities to translate our site.

The translation of the markdown files is working just fine (placing the translated files under i18n/<locale>/<pluginName>-<pluginId>/current folder). The translation of the navbar, footer and sidebar information is working fine as well.

However, we also need to translate some text that is in .js files (React components). In order to so, we've surrounded the text we wanted translated with <Translate> tags. After running the docusaurus write-translations command, the code.json was indeed created, but it only contained entries for translating the text of the files under the src/pages directory. All of the other files within the src directory (including files on the root of the src directory and files within subfolders of the src directory) were left unnacounted for in the code.json file (even though <Translate> tags were also placed in them) - which seems to differ from the explanation given in the tutorial.

I did some searching to check if there were any issues regarding this limitation, but couldn't find any. Is this supposed to be the expected behavior of the translation API? Or is it a known problem that should be investigated in order to be solved? Or am I missing something and there is already a solution to this?

Personally, I believe it would be a little bit inadequate that only files under the src/pages could get translated, since that would take away many of the capabilities of reusing React components throughout the application. It also feels a little strange to me that I'd have to add a page in my site if I wanted to get some text translated - specially considering that a React component could be used in many places of the application.

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

I can't share the project I'm working on, but I've set up a small Docusaurus project that reproduces the problem we are facing.

1. Clone repo: git clone https://github.com/JHKroger00/translation-i18n.git
2. Enter the project folder and run yarn (to install dependencies)
3. Run yarn docusaurus write-translations --locale pt
4. Check that the files (within the src directory) that have <Translate> tags, but are outside the src/pages directory, don't have their text translated (the entries are not added to the code.json file in i18n/pt folder).
5. Start site with yarn start --locale pt (for this setup, I left the default locale as english and chose portuguese as another language)
6. Check that homepage displays untranslated content that should be translated in the portuguese version (the texts Translation Test and Another Translation Test at the bottom of the page)

Expected behavior

The code.json file should contain entries for translating all the text that was surrounded by <Translate> tags (for all files under the src directory).

Actual Behavior

The code.json file only contains entries for translating the text surrounded by <Translate> tags for the files under src/pages directory (all the other subfolders of the src are apparently ignored).

Here is a snapshot of the homepage of the site showing the problem with the translations (some parts were purposely left untranslated because I did not want to spend too much time writing translations that wouldn't make much difference).

Here is a snapshot of the code.json file showing that entries outside the src/pages folder were not added (the entries showed correspond to text that is in the src/pages/index.js file).

If you want to check the files themselves, I've added <Translate> tags to the src/pages/index.js file (which do get translated), and to the src/components/test.js and src/anotherTest.js files (which do not get translated, even though the latter is in the root of the src directory).

Your Environment

• Public source code: Available at https://github.com/JHKroger00/translation-i18n
• Docusaurus version used:
  • Docusaurus 2 @canary (package.json shows 2.0.0-alpha.4162e6dcd as @docusaurus/core dependency)
  • Docusaurus site built using npx @docusaurus/init@latest init website classic
• Environment name and version:
  • Chrome 88.0.4324.190
  • node v14.15.4
  • npm 6.14.10
  • yarn 1.22.10
• Operating system and version: Windows 10 Pro - Version 20H2 (x64)

Reproducible Demo

Given the dependencies of the project (since we are using the @canary version), I wasn't able to set up the demo in SandBox. So, the reproducible demo repo that should be used can be found at https://github.com/JHKroger00/translation-i18n.git.

After cloning the repo, the steps to reproduce explained above ("To Reproduce" section) should be enough to showcase the problem.

I have set up the project with npx @docusaurus/init@latest init website classic and followed the instructions given on the tutorial.

I've also run the command yarn add @docusaurus/@core@canary to use the upcoming release (instead of the current version).

[slorber]

Thanks, you are 100% right, there is a problem.

I see what is happening and it will be fixed tomorrow.

[JohnnyBoy2103]

Thank you very much for the quick response! Kudos to the Docusaurus team!

[slorber]

thanks

Will be fixed by #4345
Note we will only try to extract from site/src, not site/myComponent.jsx. I think it's good enough but we can enhance that later if needed.

Please add your site to the showcase when it's ready ;) we want i18n sites there

[JohnnyBoy2103]

I believe that's perfect for now! We'll begin using it as soon as it's merged and available.

Thanks a lot!

Please add your site to the showcase when it's ready ;) we want i18n sites there

Will do :)

[slorber]

merged, let me know if @canary fixes it. It seems it works for us too as we have translated components in src/components

[JohnnyBoy2103]

Using @canary seems to have fixed the issue. I was able to translate components which were located in src/components and src/theme folders, as well as in the root of the src directory.

I'll let you know if we come across any other difficulties using the translations API, as we continue to use it through our website. I hope Docusaurus keeps on improving as it currently is!

[slorber]

thanks ;)