Customizing Frontend Admin Languages

System Information
  • Strapi Version: 3.3.4 Community Edition
  • Operating System: macOS 10.15.6
  • Database: MongoDB
  • Node Version: v12.13.0
  • NPM Version: 6.12.0
  • Yarn Version: 1.22.5

Hello,
I am trying to customize my admin frontend in order to disable all languages except french :fr: .
I followed this documentation here and it “broke” my frontend with this error:
main.chunk.js:118 Uncaught TypeError: Cannot read property ‘reduce’ of undefined
at main.chunk.js:118
at Array.forEach ()
at Object…/.cache/admin/src/app.js (main.chunk.js:102)
at webpack_require (bundle.js:85)
at Object.0 (main.chunk.js:344759)
at webpack_require (bundle.js:85)
at checkDeferredModules (bundle.js:46)
at Array.webpackJsonpCallback [as push] (bundle.js:33)
at main.chunk.js:1

And here is the code throwing the error:

var pluginTradsPrefixed = _i18n.languages.reduce(function (acc, lang) {
var currentLocale = plugin.trads[lang];

    if (currentLocale) {
      var localeprefixedWithPluginId = Object.keys(currentLocale).reduce(function (acc2, current) {
        acc2["".concat(plugin.id, ".").concat(current)] = currentLocale[current];
        return acc2;
      }, {});
      acc[lang] = localeprefixedWithPluginId;
    }

    return acc;
  }, {}); 

for some reason the _i18n.languages is not defined.

I think that the documentation is not too straightforward and It somehow lacks a step or further explanations for newcomers.

If someone out there has already done this I am grateful in advance for the shared solution, thank you

Why do you expect it to be defined? It’s not a global variable.

Here is how I limited my admin panel only to FR and EN,

Create file under ./admin/src/translations/index.js with content:

import fr from '../../../../node_modules/strapi-admin/admin/src/translations/fr.json';
import en from '../../../../node_modules/strapi-admin/admin/src/translations/en.json';

const trads = {
  fr,
  en,
};

export const languageNativeNames = {
  fr: 'Français',
  en: 'English',
};

export default trads;

Rebuild admin after this.

Please keep in mind that the current language is also defined based on the browser’s language:

1 Like

Thank you @sunnyson, the documentation is somehow misleading especially for newcomers.

It does not specify that you have to import language dictionaries from strapi_admin under node_modules.

Anyway thanks again.

2 Likes