11

I am trying to implement i18next in my react component using the useTranslation hook, but it keeps saying:

Uncaught Error: Test 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.

How can I add the <Suspense> any higher than what I've got? What am I doing wrong? How do I fix this? It seems to work OK when I use the <Translation> component. Naturally, it also seems to work OK if I turn Suspense off and try to handle it myself, but that sort of defeats the purpose, I think. How can I make this actually work? Do I have the Fetch backend misconfigured?

Test.js

import React, { Suspense, useState, useEffect, lazy } from "react";
import PropTypes from "prop-types";

import i18n from './i18n';
import { useTranslation } from 'react-i18next';

export default function Test( props ){
  const { t, i18n } = useTranslation( 'bingo_game' );

    return (
    <Suspense fallback={<div>Loading...</div>}>
      <div>
        Pant leg
      </div>
    </Suspense>
    )
}

Test.propTypes = {
  token: PropTypes.string.isRequired,
};

and

i18n.js

import i18n from "i18next";
import LngDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";

import Fetch from "i18next-fetch-backend";

  i18n
    .use(LngDetector) //language detector
    .use(Fetch)
    .use(initReactI18next)
    .init({
      backend: {
        loadPath: "/infra/locales/{{ns}}.json",
        // path to post missing resources
        addPath: "locales/add/{{ns}}",
        // define how to stringify the data when adding missing resources
        stringify: JSON.stringify
      },
      defaultNS: "base",
      fallbackLng: "en",
      debug: true,
      initImmediate: false
    });

export default i18n;

I've gone over the docs that I could find as well as this SO post that is not my issue.

Community
  • 1
  • 1
Micah Gideon Modell
  • 586
  • 1
  • 9
  • 24
  • which component are you using Lazy on? – Shubham Khatri Dec 24 '19 at 07:14
  • The [docs](https://react.i18next.com/latest/usetranslation-hook) don't show the use of `Lazy`, but adding this: `const { t, i18n } = lazy(() => useTranslation( 'bingo_game' ));` seems to fix it here but not in a more complex component - is this the way it should be done? – Micah Gideon Modell Dec 24 '19 at 07:26

4 Answers4

10

in your i18n file add this, it will do the magic :) 

.init({
   react: {
     useSuspense: false,
     ...

  });
THess
  • 1,003
  • 1
  • 13
  • 21
rubimbura brian
  • 619
  • 6
  • 10
  • 1
    This is rather similar to the earlier answer but I'm still not eager to disable Suspense. Ultimately, I've solved this by wrapping all my components in a sort of Suspense wrapper. I think what I probably want in the long run is to move over to one of the React Router options... – Micah Gideon Modell Mar 05 '20 at 13:40
  • yeah its really does – Noman Dec 24 '21 at 11:41
4

It's not best way but I can recommend you to turn off suspense by adding this lines to your's config

i18n
  .init({
  ...
  // react i18next special options (optional)
  react: {
    useSuspense: false,
    wait: false,
  },
});
Travnikov.dev
  • 464
  • 6
  • 14
  • 5
    Yeah, I tried that and it worked, but I don’t want to disable the feature, I want it to work properly. – Micah Gideon Modell Dec 24 '19 at 13:26
  • At some point you'll want to add tests to your project and suspense doesn't work properly with them – Travnikov.dev Dec 26 '19 at 09:51
  • Can you please explain further (@travinkov)? I have a battery of tests on the rails side of my app and a few strategic `try`/`catch` (or the rails equivalent - I forget) and `sleep` statements seems to be handling everything so far. Is there something else I need to be concerned about? – Micah Gideon Modell Dec 26 '19 at 16:26
1

Using useSuspense: false is ok but you need to use ready state in this case as well, otherwise your translation keys appear at interface until i18next is ready... Similar to this:

const { t, i18n, ready } = useTranslation()

and in the render section:

{ready && (<SampleComponent />)}
e109923
  • 85
  • 2
  • 8
  • This makes sense and I didn't realise that they made _ready_ available. I've actually re-architected the system such that this is no longer an issue, but I'll test this if I reintroduce the need later (which I might). – Micah Gideon Modell Mar 24 '22 at 12:30
1

You can set useSuspense: false in useTranslation options.

const { t } = useTranslation("your-namespace", {useSuspense: false});

https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

Vadim Cherezov
  • 11
  • 1
  • I like that this would operate on a per-case basis, thanks. It is helpful and different from the others below, but ultimately, this is more of a suspense architecture issue, I think. I ultimately re-architected my frontend to solve this and this is no longer an issue for me - another reason I cannot mark this as solved. Sorry. – Micah Gideon Modell Jun 03 '22 at 15:21