Dynamic import in function

[mikekubn]

Hi,

• I have a problem with dynamic import from public folder in function.

• I've been trying to dynamically import translations from public folder but in console from browser was path as undefined.

• And if path was undefined DOM was completely empty contained only a global style.

I use this code:

import React, { useEffect } from 'react';
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { cs, en } from 'make-plural/plurals';

const defaultLocale = 'en';
const supportedLocales = ['cs', 'en'];

i18n.loadLocaleData({
  cs: { plurals: cs },
  en: { plurals: en },
});

const initLocale = async (locale: string) => {
  const messages = await import(`../../../public/locales/${locale}/messages.json`);
  i18n.load(locale, messages);
  i18n.activate(locale);
};

const I18nLoader = ({ children }: React.PropsWithChildren<unknown>): React.ReactElement => {
  useEffect(() => {
    const languageCode = navigator.language;
    const [language] = languageCode.split('-');
    initLocale(supportedLocales.includes(language) ? language : defaultLocale);
  }, []);

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

export default I18nLoader;

Then in root folder I use this code.

const App = () => (
  <Document>
    <I18nLoader>
       ........
    </I18nLoader>
  </Document>
);

• But if I use this solution, the path to the translations is undefined.

• I did the function without dynamic import.

import React from 'react';
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { en } from 'make-plural/plurals';
import enMessages from '../../../public/locales/en/messages.json';

i18n.loadLocaleData({
  en: { plurals: en },
});

i18n.load({
  en: enMessages,
});
i18n.activate('en');

const I18nLoader = ({ children }: React.PropsWithChildren<unknown>): React.ReactElement => (
  <I18nProvider i18n={i18n}>
    {children}
  </I18nProvider>
);

export default I18nLoader;

• This works.
• But does anyone know how to do this with dynamic import?
  Thank you.