Unable to add a new language for the admin ui

Questions and Answers Strapi Admin
1
System Information
  • 4.0.3:
  • MacOS:
  • None:
  • 14.15:
  • 6.14:

I am trying to add the romanian language as a language available for translating the admin ui. I followed the docs and some other questions asked on this forum but i am unable to make it work.

Steps i followed:

  1. Created a file ro.json in /project-root/src/admin/translations/ which contained a copy of the other locale files, but translated in romanian. something along these lines:
{
"Auth.form.button.password-recovery": "Recuperare parola",
  "Auth.form.button.register": "Să începem",
  "Auth.form.button.reset-password": "Schimbați parola",
  "Auth.form.confirmPassword.label": "Parola de confirmare",
  "Auth.form.currentPassword.label": "Parola actuală",
}
  1. I created another file in that translations dir called languageNativeNames.js in which i added the native name for the ro locale.
  2. I changed the app config in app.js to include the new locale like this: locales: ["ro", "en"]
  3. Rebuild the admin ui. No new locale is visible on the login page

I managed to make it work by adding this new ro.json file in the node_modules location of the translation folder for the admin ui. But that is not a viable solution, as i am sure there is a way to do it without manually overriding the strapi node modules

2

I have the same problem here. I modified the admin/app.js following the recommandations and added “fr” as default in the plugin but nothing is happening.

  config: {
    locales: ["fr", "en"],
    translations: {
      fr: {
        "app.components.HomePage.welcome": "Bienvenue à bord !",
        "app.components.HomePage.welcome.again": "Bienvenue ",
      },
    },
  },
3

Ok I’ve found it: locales for the admin are linked to the user account - you have to change them in your profile page. Click at the bottom left of the admin where you see your name, dropdown menu will appear with “go to profile” or “disconnect” - then, in your profile page, change the language.

4

Yeah i had no problem doing that. The issue in my case is that i cannot add the romanian language as a new translation ( it is not supported by default )

5

@Odisseuss Did you find any solution?

6

Hi. I recently had to add an unsupported admin panel language in Strapi.
I found out that even though we can define custom lang in the config.locales and add translations in the config.translations, we still are unable to show that custom language as its definition is missing in the languageNativeNames const.
So my workaround, although a rough one, was to clone the ./node_modules/@strapi/admin/admin/src/translations/languageNativeNames.js file, add my missing custom lang, add the file in the extended translations dir (./src/admin/extensions/translations), in my case bg,

const languageNativeNames = {
  ar: 'العربية',
  bg: 'Български',
  cs: 'Čeština',

and then replace that file in the node_modules where it is originally defined.
Now, node_modules of course will be overridden quite often, so I added an npm command that runs with my develop and build commands.

"scripts": {
    "translate": "cp -a ./src/admin/extensions/translations/. ./node_modules/@strapi/admin/admin/src/translations",
    "develop": "npm run translate && npm run strapi develop",
    "start": "strapi start",
    "build": "npm run translate && npm run strapi build",
    "strapi": "strapi"
  },

And my ./src/admin/app.js has the following structure:

export default {
  config: {
    locales: ['bg'],
    translations: {
      bg: {
        "Auth.form.welcome.title": "Добре дошли!"
      }
    },
    bootstrap(app) {
      console.log(app);
    },
  }
};

I went event further and copied an original translation file en.json, named it bg.json (translated it, or started at least) and I copy it to the ./node_modules/@strapi/admin/admin/src/translations folder each time when I run my custom translate command.

As I find this solution far from perfect, at least I hope it can give an option to someone who really needs supporting a custom language in the Strapi admin.

If there is a better way or I have missed something from the documentation, please let me know.

So now my admin panel looks like that:

image
image1588×1316 128 KB

3 Likes
7

I just submitted a PR to allow extending languageNativeNames.

8

Hello Everyone,
I’m facing similar issue, the solution for me was to execute the build command: strapi build or npm run build

I hope this fixes your issues.

3 Likes
9

Thanks @ Abdulmalik, it worked!

10

Should it be working now? I’m trying to add a new language can’t get anything to work.

  locales: [ 'ro'],
  languageNativeNames: {
    ro: 'Română',
  },
  translations: {
    en: {
      'app.components.LeftMenu.navbrand.title': 'Project Dashboard',
    },
    ro: {
      'Settings.profile.form.section.experience.interfaceLanguage': 'Română',
      'Auth.form.button.password-recovery': 'Recuperare parola',
      'Auth.form.button.register': 'Să începem',
      'Auth.form.button.reset-password': 'Schimbați parola',
      'Auth.form.confirmPassword.label': 'Parola de confirmare',
      'Auth.form.currentPassword.label': 'Parola actuală',
      'app.components.LeftMenu.navbrand.title': 'Administrație',
      'app.components.LeftMenu.navbrand.workplace': 'Panou central',
      'Auth.form.welcome.title': 'Bine ai venit!',
    },
  },
12

Thank for your help. It works with me.

13

Just need to rename src/admin/example.app.js to app.js and uncomment the language code from the locales array. Then re-run strapi with npm run develop. :wink: