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

Experiencing the exact same issue. In my case I'm not even using Suspense in that part of the application. — Michael, Mar 26 '19 at 09:27

score 31 · Answer 1 · answered Nov 02 '19 at 16:05

31

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

answered Nov 02 '19 at 16:05

Tigran Harutyunyan

327
3
4

Thank! This parameter in react section has solved my issue. – Pangur Jan 29 '20 at 17:38
thanks, it solved for me too, but i wasn't using Suspense in the top layer, still helpful. – Singh Sep 26 '21 at 15:01

score 7 · Answer 2 · answered Mar 11 '20 at 18:00

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>

score 2 · Answer 3 · answered Mar 02 '19 at 00:48

2

Can you provide a more specific example on the error situation? I have try my best simulate in sandbox (https://codesandbox.io/s/10j2xw6j3), but I can't reproduce the case.

p.s. This should be added in comment, but stackoverflow stop new users from doing that. So I post here and edit later

answered Mar 02 '19 at 00:48

samMeow

31
2

I am not really sure if I can make it much simpler. I followed all the instructions. As soon as I add withTranslation to any of my class files, I get the error and my app no longer runs. Does it matter at all that I am trying to load the translations via a rest call? – Michael Margozzi Mar 04 '19 at 04:29
Also, my code uses withTranslation to wrap a class that is already wrapped. Does that matter? – Michael Margozzi Mar 04 '19 at 04:32
I get this error too - I do not have a fallback UI, but it still should not happen. I do think the withTranslation makes the issue happen. For me, it is not every time, though, it is just sometimes and on some boxes... – Jeremy Jun 18 '19 at 23:15

score 0 · Answer 4 · answered Mar 04 '19 at 18:12

0

Just a wild guess, could it be because you're defining Loader after you're using it?

answered Mar 04 '19 at 18:12

ulu

5,872
4
42
51

I thought of that too. I moved it ahead and no luck. I made it a separate component and no luck. – Michael Margozzi Mar 04 '19 at 18:40

score 0 · Answer 5 · answered Feb 14 '20 at 09:58

If you are using XHR (i18next-xhr-backend), then you need to wrap your app into a Suspense component:

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

score 0 · Answer 6 · answered Jul 26 '22 at 11:05

0

Don't disable suspend! Add resources to your init:

i18n.init({
    resources: {},
});

answered Jul 26 '22 at 11:05

Emil

293
3
7

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

6 Answers6