I did lingui compile but in production the translations are showing only the ids of keys, it is not using defaultLocale translation.

[crazyyi]

It is working fine in dev. So I have this config:

In i18n.ts I have this:

export function activateLocale(i18n: I18n, locale: string, messages: Messages) {
  if (locale === "pseudo") {
    locale = "en";
  }

  const cardinalRules = new Intl.PluralRules(locale, { type: "cardinal" });
  const ordinalRules = new Intl.PluralRules(locale, { type: "ordinal" });

  i18n.loadLocaleData(locale, {
    plurals: (n, ordinal) => {
      return (ordinal ? ordinalRules : cardinalRules).select(n);
    },
  });

  i18n.load(locale, messages);
  i18n.activate(locale);
}

and in next.config.js I have this:

i18n: {
    locales: ['en', 'ko', 'zh-Hant', 'zh', 'es', 'fr', 'ms', 'vi', 'ja', 'pseudo'],
    defaultLocale: 'en'
  },

lingui.config.js is like this:

const nextConfig = require("./next.config");
module.exports = {
  locales: nextConfig.i18n.locales,
  pseudoLocale: "pseudo",
  sourceLocale: nextConfig.i18n.defaultLocale,
  fallbackLocales: {
    default: nextConfig.i18n.defaultLocale,
  },
  extractBabelOptions: {
    presets: ["next/babel"]
  },
  catalogs: [
    {
      path: "src/locales/{locale}/message",
      include: ["src/pages", "src/components"],
    },
  ],
  format: "minimal",
};

Anything I am missing in the config? Do I need ot explicitly config the fallbacklng?

[timofei-iatsenko]

First, please specify a syntax in your code snippets, so github would apply a syntax highlighting for them https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting

Second, the input provided by you is not enough to say what is going wrong. I don't see how catalogs are loaded in the app. and how do you compile them.

Couple suggestion though:

• don't use minimal, or lingui or any other json type of catalogs. They are not created for that. Use po catalogs, they much better and all tooling in lingui assuming you use po so all integration would be easier
• try to use v4, there are many improvements related to fallbacks

[timofei-iatsenko]

Show your code.

[timofei-iatsenko]

https://github.com/thekip/nextjs-translation-demo/tree/update-for-latest-lingui compare with working example

[crazyyi]

@thekip
Thanks again. I look at the example you wrote very carefully, and find that I am missing the bracket around messages variable in

const messages = await import(`@lingui/loader!./locales/${locale}/${filename}.po`);

This mistake wouldn't throw an error during development or production and I can attach all the translations to i18n variable. It just wouldn't put the translations on the production site.

I thought dynamic import would return the translation object but it's returning an object containing the messages object.

FYI, this:

const messages = (await import(`@lingui/loader!./locales/${locale}/${filename}.po`)).default;

doesn't work as well. That's why my build kept failing.

Only this one works in my case:

const { messages } = await import(`@lingui/loader!./locales/${locale}/${filename}.po`);

[timofei-iatsenko]

Glad you find the issue. It all depends on your bundler / transpiler configuration. For some it would return with default for other return messages directly (depends on esModuleInterop flag).

By the way. The reason why it works in development and doesn't work in production is that in development, Macro left in the code source messages to make DX better. But in production source messages dropped from the bundle to save bytes.

That's why in development you had fallback to English string (source) and in production you had fallback to keys (source messages was dropped and catalogs was not loaded)

[crazyyi]

@thekip
Thank you for the explanation. It would be of great help for the users if the loader throws a warning/error when the translations are not correctly loaded.