Error: I18nextWithTranslation suspended while rendering, but no fallback UI was specified

Question

I am trying to get I18N working using react-i18next. I am following the steps provided here as close as possible. I have tried for several hours with lots of googling around and have not yet discovered what I am doing wrong. Any help is appreciated.

I am getting this Error stack trace:

    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)

I have a Suspense with fallback at the very top level:

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>
);

I am not using hooks, but rather the HOC recomended for use with classes on the App class like this:

export default withTranslation()(App);

Answer 1

By default useSuspense is set to true so React needs fallback UI. Setting useSuspense to false will solve your problem as React will not need fallback UI anymore.

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

Answer 2

I had the same problem and I've solved wrapping my render on <Suspense>, you can find more info here https://reactjs.org/docs/react-api.html#reactsuspense

And in i18next said the same in its documentation https://react.i18next.com/latest/using-with-hooks#translate-your-content

-

also

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

The previous code works, but left many warnings, the best way is use <Suspense>