fix: Fixing bug where Strapi UI is crashing when no locale is found

[michaelrazmgah]

What does it do?

Adding a try-catch if unable to load correct translations - will now fallback to english.

Why is it needed?

I have swedish locale 'sv' in my Strapi app, but it makes the app crash since it is not translated in the plugin

How to test it?

Change locale to 'sv' or another missing translation, it should load 'en' translations

Related issue(s)/PR(s)

Let us know if this is related to any issue/pull request

[boazpoolman]

Thanks for this PR @michaelrazmgah

I'll do some testing and then we can get it merged :)

[TMSchipper]

@michaelrazmgah I attempted to reproduce the bug you described, but I was unable to replicate the issue. Could you please provide more specific details or the exact steps you followed that led to the crash? This would help me better understand how to trigger the problem.

I cannot reproduce the bug

[michaelrazmgah]

ut I was unable to replicate the issue. Could you please provide more specific details or the exact steps you followed tha

My src/admin/app.tsx looks like this:

  config: {
    locales: ["sv"],
  },
  bootstrap() {},
};

This causes a crash when i try to load the strapi dashboard, where it tries to load the Swedish translation even though there is none.

I can solve it by either changing my locale to "en" as follows, or by editing the file as in my PR to make it fallback to the english translation.

export default {
  config: {
    locales: ["en"],
  },
  bootstrap() {},
};

[TMSchipper]

@michaelrazmgah EDIT: I faced your problem, let me take another look! Thank you for your work.

[TMSchipper]

async registerTrads({ locales }) {
    const importedTrads = await Promise.all(
      locales.map(async (locale) => {
        try {
          // eslint-disable-next-line import/no-dynamic-require
          const data = require(`./translations/${locale}.json`);
          return {
            data: prefixPluginTranslations(data, pluginId),
            locale,
          };
        } catch {
          return {
            data: {},
            locale,
          };
        }
      }),
    );

    return Promise.resolve(importedTrads);
  },

Hi @michaelrazmgah,
Could you try this? If it works for you as well, could you update your code with this example?
Cheers!

[michaelrazmgah]

async registerTrads({ locales }) {
    const importedTrads = await Promise.all(
      locales.map(async (locale) => {
        try {
          // eslint-disable-next-line import/no-dynamic-require
          const data = require(`./translations/${locale}.json`);
          return {
            data: prefixPluginTranslations(data, pluginId),
            locale,
          };
        } catch {
          return {
            data: {},
            locale,
          };
        }
      }),
    );

    return Promise.resolve(importedTrads);
  },

Hi @michaelrazmgah, Could you try this? If it works for you as well, could you update your code with this example? Cheers!

Hi @TMSchipper, I can confirm your solution works and is a lot nicer, I've updated the PR! Thank you!

[TMSchipper]

@michaelrazmgah thank you for your support and effort! Have a good weekend!

[mmb-michaelrazmgah]

@TMSchipper thanks to you guys for this great plugin. Have a great weekend you too!

[boazpoolman]

Good work everyone 🙂