title: Create react app with i18next - load translations from json file
body: <p>Im trying to configure my react app with multiple languages. For this Im using i18next for react. My config file for this is:</p>
  <h2>i18n.ts</h2>
  <pre><code>import i18next from 'i18next';
  import { initReactI18next } from 'react-i18next';
  import XHR from 'i18next-xhr-backend';
  
  const backendOptions = {
      loadPath: '/locales/{{lng}}.json',
      crossDomain: true,
  };
  
  i18next
      .use(initReactI18next)
      .use(XHR)
      .init({
          backend: backendOptions,
          debug: true,
          lng: 'en_GB',
          fallbackLng: false,
          react: {
              wait: true
          }
      });
  
  export default i18next;
  </code></pre>
  <p>My translations are in (example-path) <code>public/locales/en_GB.json</code></p>
  <p>In my index.tsx I import the config with <code>import './i18n';</code></p>
  <p>And the usage of my actual component looks like this:</p>
  <h2>tab-bar.tsx</h2>
  <pre><code>interface TabBarInterface {
      value: number;
  }
  
  class TabBar extends React.Component&lt;WithTranslation, TabBarInterface&gt; {
  
      public tabs: Array&lt;boolean | string&gt;;
  
      constructor(props: any) {
          super(props);
          const { t } = this.props;
          this.state = { value: 0, isExModeAvailable: true };
  
          this.tabs = [
              t('SID_RHMI_BYOD_INFO'),
              t('SID_RHMI_BYOD_MEDIA'),
              t('SID_RHMI_BYOD_CLIMATE')
          ].filter(Boolean);
      }
  
      handleChange = (event: ChangeEvent&lt;{}&gt;, value: number) =&gt; {
          this.setState({ value });
      };
  
      handleChangeIndex = (value: number) =&gt; {
          this.setState({ value });
      };
  
      render() {
          const { classes } = this.props;
          const { value } = this.state;
  
          return (
              &lt;div className={classes.root}&gt;
                  &lt;AppBar className={classes.appBar} position=&quot;relative&quot;&gt;
                      &lt;Tabs value={value} indicatorColor=&quot;primary&quot; textColor=&quot;primary&quot;
                            classes={{
                                scrollButtons: classes.scrollBtn,
                                flexContainer: classes.tabsContainer
                            }} onChange={this.handleChange}&gt;
                          {
                              this.tabs.map((label, key) =&gt;
                                  &lt;Tab className={classes.tab} label={label} key={key}/&gt;)
                          }
  
                      &lt;/Tabs&gt;
                  &lt;/AppBar&gt;
                  &lt;SwipeableViews index={value} onChangeIndex={this.handleChangeIndex}&gt;
                      &lt;JourneyInfo/&gt;
                      &lt;div&gt;Item Two&lt;/div&gt;
                      &lt;div&gt;Item Three&lt;/div&gt;
                      &lt;div&gt;Item Four&lt;/div&gt;
                  &lt;/SwipeableViews&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default (withTranslation()(TabBar));
  </code></pre>
  <p>I can also see that the translation file gets successfully loaded but cra throws me this error:</p>
  <pre><code>index.js:1437 The above error occurred in the &lt;withI18nextTranslation(TabBar)&gt; component:
      in withI18nextTranslation(TabBar) (created by WithStyles(withI18nextTranslation(TabBar)))
      in WithStyles(withI18nextTranslation(TabBar)) (at app.tsx:11)
      in div (at app.tsx:10)
      in ThemeProvider (at app.tsx:9)
      in App (at src/index.tsx:7)
  ...
  Consider adding an error boundary to your tree to customize error handling behavior.
  
  ...
  Add a &lt;Suspense fallback=...&gt; component higher in the tree to provide a loading indicator or placeholder to display.
      in withI18nextTranslation(TabBar) (created by WithStyles(withI18nextTranslation(TabBar)))
    ...  
  logger.js:21 i18next::backendConnector: loaded namespace translation for language en_GB {SID_TITLE: &quot;Bring Your Own Device&quot;, SID_TITLE_REMOTE_CONTROL: &quot;Remote Control&quot;, SID_RHMI_BYOD_BANNER: &quot;Controlling of vehicle functions active.&quot;, SID_RHMI_BYOD_BANNER_DETAIL: &quot;Connected Command activated on {{device name}}. No…n control vehicle functions as playback or sound.&quot;, SID_RHMI_BYOD_CID_REMOVE_PERMISSION: &quot;You can manage the permissions for Connected Comma… the menu &quot;Communication&quot; under &quot;Mobile devices&quot;.&quot;, …}
  logger.js:21 i18next: languageChanged en_GB
  logger.js:21 i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: false, …}
  </code></pre>