React.lazy usage with useTranslation hook

Describe the bug I have a few pages that use React.lazy. It seems that on those pages, my translations aren’t loaded (or maybe are loaded after the component renders).

I’ve tried several variations of setting react: { useSuspense: false} and useTranslation('translations', {useSuspense: false})` but have had no success getting translations to display.

I’m not sure if this is a bug, or a misconfiguration on my part.

Occurs in react-i18next version 10.6.1

To Reproduce

1. Use the following config: i18n.ts

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import {initReactI18next} from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    defaultNS: 'translation',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    load: 'languageOnly',
    saveMissing: true,
  });

export default i18n;

Optionally add react: { useSuspense: false}

1. Lazy load a component that uses the useTranslation hook:

const NotFound = React.lazy(() => import('./NotFound'));

import React from 'react';
import {useTranslation} from 'react-i18next';

const NotFound: React.SFC = () => {
  const [t] = useTranslation();
  return <h1 data-testid='not-found-heading'>{t('not-found')}</h1>;
};

export default NotFound;

Optionally use useTranslation('translations', {useSuspense: false})`

Expected behaviour I expect to see my translations, not the key of the translation.

OS (please complete the following information):

• Device: 2016 MBP 13" macOS 10.14.4
• Browser: Firefox Developer Edition 67.0b6

[jamuhl]

Idk…just made the change again: https://codesandbox.io/s/react-i18next-lazy-loading-example-forked-kv2cr works on my browser…

[jamuhl]

@slavab89 but your sample is totally wrong…you’re using namespaces inside a component but do not define that inside useTranslation -> how should it load that at all…using something like: t("lazy:lazyContent") does not magically load the namespace or assert it is loaded…if you’re using namespaces define them in useTranslation…that’s it.