React-i18next suspense

Question

I m using React-i18next just like the example

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

function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
   </Suspense>
   );
}

But Suspense is breaking one of my other components, namely react-masonry-layout. Is it possible to not using Suspense?

Thanks.

in face i m not so sure whether Suspense is the culprit. But I believe so. So I would like to know how to use react-i18next without suspense. It seems Suspense is a must for i18next. — Cheung Brian, Nov 15 '19 at 06:00
Suspense is never a must, its up to you if you want to use it. Also I don't see where exactly are you using react-i18nnext — Shubham Khatri, Nov 15 '19 at 06:03

score 17 · Answer 1 · answered Dec 16 '19 at 18:09

react-i18nnext uses Suspense by default. If you don't want to use it, you have to specify that in your configuration. If you have a i18n config file, you can set the useSuspense flag to false in the react section of the init object.

//Example config
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
   fallbackLng: "en",
   debug: true,
   resources: {

   },
   interpolation: {
     escapeValue: false,
   },
  react: {
     wait: true,
     useSuspense: false,
  },
})

Or you can just set the flag in your component.

<MyComponent useSuspense={false} />

Just be aware that choosing not to use Suspense has its implications. You have to write checks to handle the 'not ready' state ie: have a loading component render when state is not ready and your component render when the state is ready.Not doing so will result in rendering your translations before they loaded.

Thank you very much. Let me try that. I have a masonry component which needs to calculate screen width and height onload. I suspect that suspense interferes with this masonry component. So I wanna try. — Cheung Brian, Dec 18 '19 at 03:05
Tanks for the reply, got the same problem with the suspense interrupting my `@material-ui` animations — Fernando Gomes, Jun 18 '20 at 03:59
Suspense is experimental - should we be using it in a production system ? I'm kinda surprised this is the official recommendation from react-i18next ? — Woody, Dec 15 '20 at 11:16

score 0 · Answer 2 · answered Sep 02 '21 at 06:33

Date: 02/09/2021

Versions

    "next": "^11.0.1",
    "next-i18next": "^8.5.1",

In NextJs with SSR Suspense is not supported yet. So if you need to remove that you need to disable it on next-i18next.config.js.

Issue

Error: ReactDOMServer does not yet support Suspense.

Fix `next-i18next.config.js`

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  localePath: path.resolve('./assets/locales'),
  react: {
    useSuspense: false,
  },
};

React-i18next suspense

2 Answers2

Date: 02/09/2021

Issue

Fix next-i18next.config.js

Fix `next-i18next.config.js`