CODEWITHSUNDEEP
reactjsreact-i18next
Cheung Brian
Cheung Brian

Reputation: 755

React-i18next suspense

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.

Upvotes: 18

Views: 28104

Answers (2)

Mohamed Jakkariya
Mohamed Jakkariya

Reputation: 1627

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

Upvotes: 0

rivnatmalsa
rivnatmalsa

Reputation: 650

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.

Upvotes: 20

Related Questions