CODEWITHSUNDEEP
reactjsreact-i18next
Michael Margozzi
Michael Margozzi

Reputation: 221

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

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

Upvotes: 22

Views: 12736

Answers (6)

Emil
Emil

Reputation: 302

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

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

Upvotes: 0

CrsCaballero
CrsCaballero

Reputation: 2348

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>

Upvotes: 6

Ilya Iksent
Ilya Iksent

Reputation: 1798

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

Upvotes: 0

Tigran Harutyunyan
Tigran Harutyunyan

Reputation: 366

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

Upvotes: 35

ulu
ulu

Reputation: 6092

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

Upvotes: 0

samMeow
samMeow

Reputation: 31

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

Upvotes: 2

Related Questions