js-lingui: Consistent warning that "I18nProvider did not render ..."

I ran into the same issue after applying the dynamic loading method. It seems that it is triggered by the <I18nProvider> component when it is first rendered, before the useEffect hook runs.

Maintainers, please correct me if I’m wrong. As far as I can see things still work as expected. The warning doesn’t seem to do any harm, but it is annoying and it is costing developers time because it looks like something that needs to be fixed.

As a workaround, to get rid of the warning, I added two lines to the I18n loader helper, immediately after the call to i18n.loadLocaleData():

i18n.load(defaultLocale, {});
i18n.activate(defaultLocale);

This activates the default locale with an empty set of messages, so at least a “dummy locale” is active when <I18nProvider> is first rendered.

@andrii-bodnar I believe this can be closed as the implementation has changed in v4 🙂

Same question as @tommhuth and same setup. Language files are loaded in async/await and only then activate()/load() is called. It seems to be working anyway but quite annoying if it doesn’t really indicate a real issue. It should be possible though according to https://lingui.js.org/guides/dynamic-loading-catalogs.html#final-i18n-loader-helper

I18nProvider did not render. A call to i18n.activate still needs to happen or forceRenderOnLocaleChange must be set to false. Me too.

and you need to trans with

const {i18n} = useLingui()

Even if you use lingui macro

macro transform you code and set i18 global when local not found

// Provider

import { ReactNode, useEffect, useState } from 'react';
import { en, ru } from 'make-plural';
import { setupI18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { useStore } from 'effector-react/scope';
import { $locale, $messages } from './model';

type Props = {
  children: ReactNode;
};

export function LocaleProvider({ children }: Props) {
  const locale = useStore($locale);
  const messages = useStore($messages);

  const [i18n] = useState(() =>
    setupI18n({
      messages: {
        [locale]: { ...messages },
      },
      localeData: {
        en: { plurals: en },
        ru: { plurals: ru },
      },
      locale,
    }),
  );

  useEffect(() => {
    i18n.load(locale, { ...messages });
    i18n.activate(locale);
  }, [i18n, locale, messages]);

  return (
    <I18nProvider i18n={i18n} forceRenderOnLocaleChange={false}>
      {children}
    </I18nProvider>
  );
}

model

import { Messages } from '@lingui/core';
import { createEffect, createEvent, createStore, sample } from 'effector';
import { appStarted } from 'shared/start';

export const $locale = createStore('ru');
export const $messages = createStore<Messages>({});

export const changeLocale = createEvent<string>();

export const loadLocalesFx = createEffect(async ({ locale }: { locale: string }) => {
  const rootMessages = await import(/* webpackChunkName: "root-i18-[request]" */ `i18n/locales/${locale}.js`).then(
    ({ messages }) => messages as Messages,
  );

  return rootMessages;
});

$locale.on(loadLocalesFx.done, (_, { params }) => params.locale);
$messages.on(loadLocalesFx.doneData, (_, messages) => messages);

sample({
  clock: appStarted,
  source: $locale,
  fn: locale => ({ locale }),
  target: loadLocalesFx,
});

sample({
  clock: changeLocale,
  fn: locale => ({ locale }),
  target: loadLocalesFx,
});

With redux

effector replace with redux and use createAsyncThunk for handle async import, selectors for data access

@gpessa

@tommhuth You need to set forceRenderOnLocaleChange={false}

And create local instance like this

  const [i18n] = useState(() =>
    setupI18n({
      messages: {
        [locale]: { ...messages },
      },
      localeData: {
        en: { plurals: en },
        ru: { plurals: ru },
      },
      locale,
    }),
  );

On ssr I created thunk with webpack dynamic import First SSr render completed with correct locales On static (no ssr) mode app waiting for tryToLoad locale (its quickly operation)