Erreur: I18nextWithTranslation suspendu pendant le rendu, mais aucune interface utilisateur de secours n'a été spécifiée

Question

J'essaie de faire fonctionner I18N en utilisant react-i18next. Je suis les étapes fournies ici aussi près que possible. J'ai essayé pendant plusieurs heures avec beaucoup de recherches sur Google et je n'ai pas encore découvert ce que je fais mal. Toute aide est appréciée.

J'obtiens cette trace de pile d'erreur:

    Exception has occurred: Error
Error: I18nextWithTranslation suspended while rendering, but no fallback UI was specified.

Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.
    in I18nextWithTranslation (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
    in CookiesProvider
    at throwException (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:45969:13)
    at renderRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47147:11)
    at performWorkOnRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48000:7)
    at performWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47912:7)
    at performSyncWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47886:3)
    at requestWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47755:5)
    at scheduleWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47569:5)
    at scheduleRootUpdate (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48230:3)
    at updateContainerAtExpirationTime (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48258:10)
    at updateContainer (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48315:10)

J'ai un suspense avec repli au plus haut niveau:

import React, { Suspense } from 'react';
import ReactDOM from "react-dom";
import { CookiesProvider } from 'react-cookie';
import App from "./App.js";
import { BrowserRouter } from "react-router-dom";
// import i18n (needs to be bundled ;)) 
import './i18n';

ReactDOM.render(
  <CookiesProvider>
    <BrowserRouter basename="/cgadmin-react-primeng/">
      <Suspense fallback={<Loader />}>
        <App />
      </Suspense>
    </BrowserRouter>
  </CookiesProvider>, 
  document.getElementById("root")
);

const Loader = () => (
  <div>loading...</div>
);

Je n'utilise pas de crochets, mais plutôt le HOC recommandé pour une utilisation avec des classes sur la classe App comme ceci:

export default withTranslation()(App);

Answer 1

J'ai eu le même problème et j'ai résolu d'habiller mon rendu sur <Suspense>, vous pouvez trouver plus d'informations ici https://reactjs.org/docs/react-api.html#reactsuspense

Et dans i18next dit la même chose dans sa documentation https://react.i18next.com/latest/using-with-hooks#translate-your-content

-

aussi

i18n
    .init({
        react: {
            useSuspense: false
        }
    });

Le code précédent fonctionne, mais a laissé de nombreux avertissements, la meilleure façon est d'utiliser <Suspense>

Answer 2

Si vous utilisez XHR (i18next-xhr-backend), vous devez encapsuler votre application dans un composant Suspense:

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

function MyComponent() {
  const { t, i18n } = useTranslation();

  return <h1>{t('Welcome to React')}</h1>
}

// i18n translations might still be loaded by the xhr backend
// use react's Suspense
export default function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
    </Suspense>
  );
}