Lingui singleton and runtimeConfigModule

[ivandotv]

Currently, I'm trying to make Lingui work with Next.js server-side rendering, I'm concerned with the i18n singleton, so I've tried to use setupI18n(), which compiles but I get a runtime error:

Plurals for locale undefined aren't loaded. Use i18n.loadLocaleData method to load plurals for specific locale.
Using other plural rule as a fallback. 

This is my file structure:

├── lingui.config.js
├── next.config.js
├── node_modules
└── src
      ├── components
      ├── initTranslations.js
      ├── pages
      ├── translations

I have tried using

  runtimeConfigModule: ['./src/initTranslations.js', 'i18n']

But it has no effect?
How is runtimeConfigModule supposed to work? How it resolves the import from 'initTranslations` in different nested files?
my directory structure is this:

// initTranslations.js
import { setupI18n } from '@lingui/core'
import defaultCatalog from './translations/locales/en/messages'
import { en, sr, es } from 'make-plural/plurals'

export const i18n = setupI18n()

//load default english
i18n.load('en', defaultCatalog.messages)

i18n.loadLocaleData({
  en: { plurals: en },
  sr: { plurals: sr },
  es: { plurals: es }
})

This is the component where the error occurs:

import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
import { t } from '@lingui/macro'

export function Switcher() {
  const router = useRouter()
  const [locale, setLocale] = useState(router.locale.split('-')[0])

  const firstLang = 'English'

  const languages = {
    en: t`${firstLang}`,
    sr: t`Serbian`,
    es: t`Spanish`
  }

  const locales = Object.keys(languages)

  return (
    <select value={locale} onChange={(evt) => setLocale(evt.target.value)}>
      {locales.map((locale) => {
        return (
          <option value={locale} key={locale}>
            {languages[locale]}
          </option>
        )
      })}
    </select>
  )
}

[tricoder42]

Hey @ivandotv, you haven't activated your default locale. You need to call i18n.activate(defaultLocale)

That's why the error says Plurals for locale undefined .... The locale isn't defined

[ivandotv]

I have the the activate method in top level component (_app.js) and I have also added the call to the activate method in initTranslations.js but the error still remains.

// initTranslations.js
import { setupI18n } from '@lingui/core'
import defaultCatalog from './translations/locales/en/messages'
import { en, sr, es } from 'make-plural/plurals'

export const i18n = setupI18n()

//load default english
i18n.load('en', defaultCatalog.messages)

i18n.loadLocaleData({
  en: { plurals: en },
  sr: { plurals: sr },
  es: { plurals: es }
})

i18n.activate('en')

I have a simple test repository if you want to check it out.
https://github.com/ivandotv/lingui-test

[ivandotv]

I still can't get this to work. How are those values read from the config?
I have changed the values of runtimeConfigModule to nonexistent values, and it doesn't even throw. It looks like they are not even read.

  runtimeConfigModule: ['fake-path', 'wrongGlobalName']

[Manubi]

Any news on this one? I do geht the same error unfortunately. Also with next.js.

[Manubi]

I do have still the same issue. I always get the same error message on the first reload of the page.

I can't find any difference to the official with-lingui nextjs example.
https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-lingui?file=pages%2F_app.js

https://github.com/vercel/next.js/tree/canary/examples/with-lingui

[semoal]

Probably @Manubi the implementation in Lingui doesn't work 100% correct. I'm a few days off, had to disconnect for a while... when I get back I'll try to take a look to this

Sorry for the inconveniences

[Manubi]

No worries! enjoy your time off! 😃

[Manubi]

Just updated to the latest lingui/cli and loader to 3.11.1. Still having the same errors.
The above errors only show up on the first load of the i18n. The following screens with i18n are fine.

[semoal]

Didn't work on this issue mate, totally forgot, I'll take a look this week and I'll try to find a solution to be published asap.

[Manubi]

Any news :)

[dqunbp]

I am using Next.js and I have the same problem.
I guess it has nothing to do with SSR.
My implementation:

import * as React from "react";
import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";
import { useRouter } from "next/router";

import { en, ru, zh } from "make-plural/plurals";
import { t } from "@lingui/macro";
import { AllLocaleData, AllMessages } from "@lingui/core";

import messagesRu from "locales/ru/messages";
import messagesEn from "locales/en/messages";
import messagesZh from "locales/zh-CN/messages";

export const messages: AllMessages = {
  en: messagesEn.messages,
  ru: messagesRu.messages,
  "zh-CN": messagesZh.messages,
};

export const plurals: AllLocaleData = {
  en: { plurals: en },
  ru: { plurals: ru },
  "zh-CN": { plurals: zh },
};

export const defaultLocale = "en";

const LanguageProvider: React.FC = ({ children }) => {
  const { locale } = useRouter();

  // once before render load all i18n catalogs and plurals, this is run on the client only
  React.useState(() => {
    i18n.loadLocaleData(plurals);
    i18n.load(messages);
    i18n.activate(typeof locale === "undefined" ? defaultLocale : locale);
  });

  React.useEffect(() => {
    if (i18n.locale === locale) return;
    i18n.activate(typeof locale === "undefined" ? defaultLocale : locale);
  }, [locale]);

  return React.createElement(I18nProvider, { i18n }, children);
};

export default LanguageProvider;

[toondkn]

This is caused by <Trans/> components or t template literals from rendering before the locale messages/plurals are loaded.

Since the only sane approach is loading the messages asynchronously to prevent loading all locales upfront, there is a high chance the app is already rendering before lingui is properly set up.

I managed to solve this issue for my project by not loading the initial locale from within the react code in a side effect, since this causes aforementioned race condition.

Load your default (or previously set locale, wherever you happen to store that state) before you even first render the app.

Here is an example:

activateLocale(defaultLocale).then(() => {
  ReactDOM.render(
    <App />,
    rootEl
  );
});

I'm not yet into SSR, maybe someone can find a similar fix for those cases?

For improved perceived loading times, it would be great if <Trans /> and t would just ignore a missing locale.

Maybe a better approach can be achieved by wrapping <Trans /> in a custom component with a react boundary?

[lucax88x]

@toonddd

I had this problem, then I upgraded to very latest version from 3.13.1 to 3.13.2 and problem was gone....

Hope this helps someone.

[sendra]

Updating the lib version solved it for me also. Thx!!!

[paales]

In my particular situation it was because I had multiple versions of @lingui/core installed and making sure all version match solved the issue.