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