[i18n] Some language aren't support by i18n

[JulienHe]

TLDR: Can't update the navigation title in Japanese. Video.

What

While working on a project for a client, we need to have Strapi handle the Japanese language.
The update isn't happening when you click on Save.

The payload was: q: %E6%88%A6%E7%95%A5%E3%83%AD%E3%83%BC%E3%83%89%E3%83%9E%E3%83%83%E3%83%97.
I did try with different languages like Korean and had the same problem.

One interesting thing to notice is that if you add a Romanian letter in the title, the update is happening. Beginning, end or in the title itself.

Comparative table

I run some tests to see which language had issues (as far as possible)
Native = only the character from that specific language
Mix = With one or more Romanian letters (A-Z)

Language	Native	Mix
Japanese	🚫	✅
Korean	🚫	✅
Arabic	✅	✅
Amharic	🚫	✅
Armenian	✅	✅
Assamese	🚫	✅
Bengali	🚫	✅
Bhojpuri	🚫	✅
Chinese (Simplified)	🚫	✅
Chinese (Traditional)	🚫	✅
Dhiveri	✅	✅
Dogri	🚫	✅
Georgian	✅	✅
Greek	✅	✅
Gujarati	🚫	✅
Hebrew	🚫	✅
Hindi	🚫	✅
Japanese	🚫	✅
Kannada	🚫	✅
Khmer	🚫	✅
Konkani	🚫	✅
Korean	🚫	✅
Kurdish	✅	✅
Lao	🚫	✅
Maithili	🚫	✅
Malayalam	🚫	✅
Marathi	🚫	✅
Manipuri	🚫	✅
Myanmar	🚫	✅
Nepali	🚫	✅
Odia	🚫	✅
Pashto	✅	✅
Persian	✅	✅
Punjabi	🚫	✅
Sanskrit	🚫	✅
Sindhi	✅	✅
Sinhala	🚫	✅
Tamil	🚫	✅
Telugu	🚫	✅
Thai	🚫	✅
Tigrinya	🚫	✅
Urdu	✅	✅
Uyghur	✅	✅
Yiddish	🚫	✅

[ZacharyChim]

I have the same issue. If you have only Chinese (Traditional) characters, the Save button won't work. Any idea?

example

[JulienHe]

@ZacharyChim Yeah, I listed Chinese (traditional and Simplified) in the missing table too.

[cyp3rius]

Thanks for such detailed check. I'm moving this issue to investigation now.

[cyp3rius]

So in reality... it's not an issue :) It's some kind of consequence of the approach we took in a past with opening and simplifying the getSlug service method.

If you follow this chapter od documentation everything is going to work. Edit the preprocess by the way which is going to allow you to slugify non AZ characters. Example which worked for me (is not perfect as it encoding characters in slug) is:

const preprocess = (q) => encodeURIComponent(q);

[ZacharyChim]

Thank you for your response, @cyp3rius

I'm rather new to Strapi and I followed the link you provided, but can't find /admin/src/index.js, but only node_modules/strapi-plugin-navigation/admin/src/index.js. In that file, I did find the bootstrap section, but after adding the code:

bootstrap({ strapi }) {
        const navigationCommonService = strapi.plugin("navigation").service("common");
        const originalGetSlug = navigationCommonService.getSlug;
        const preprocess = (q) => {
          return encodeURIComponent(q);
        };
    
        navigationCommonService.getSlug = (query) => {
          return originalGetSlug(preprocess(query));
        };
      },

And re-build Strapi, run yarn dev, Strapi turns blank, with the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'plugin')
    at bootstrap (main.10fb271a.js:908:5663)
    at admin-app.083a7a37.chunk.js:66:7279
    at Array.forEach (<anonymous>)
    at Zs.bootstrap (admin-app.083a7a37.chunk.js:66:7227)
    at main.10fb271a.js:417:41287

Am I doing it wrong? Thanks

[cyp3rius]

@ZacharyChim you should modify that in your Strapi project, not the plugin files. The bootstrap method is provided as empty by Strapi in default configuration.

[ZacharyChim]

Thanks for you response again @cyp3rius

Which file should I edit? Because in the document, it says /admin/src/index.js, but I don't have a admin folder in my Strapi folder. I found a /src/admin/, but there's no index.js, should I create one?

I found an index.js under /src/, it looks like this:

export default {
  /**
   * An asynchronous register function that runs before
   * your application is initialized.
   *
   * This gives you an opportunity to extend code.
   */
  register(/*{ strapi }*/) {},

  /**
   * An asynchronous bootstrap function that runs before
   * your application gets started.
   *
   * This gives you an opportunity to set up your data model,
   * run jobs, or perform some special logic.
   */
  bootstrap(/*{ strapi }*/) {},
};

So I tried copying the bootstrap part here and re-build Strapi and run dev, but still not working.

So which file should I edit? Thanks.

[cyp3rius]

That's the correct file.

Should looks like this one:

'use strict';

module.exports = {
  /**
   * An asynchronous register function that runs before
   * your application is initialized.
   *
   * This gives you an opportunity to extend code.
   */
  register(/*{ strapi }*/) {},

  /**
   * An asynchronous bootstrap function that runs before
   * your application gets started.
   *
   * This gives you an opportunity to set up your data model,
   * run jobs, or perform some special logic.
   */
  bootstrap({ strapi }) {
    const navigationCommonService = strapi.plugin("navigation").service("common");
    const originalGetSlug = navigationCommonService.getSlug;
    const preprocess = (q) => encodeURIComponent(q);
  
    navigationCommonService.getSlug = (query) => {
      return originalGetSlug(preprocess(query));
    };
  },
};