Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fix 'no fallback UI was specified' in react i18next using hooks

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.

like image 754
Micah Gideon Modell Avatar asked Dec 24 '19 06:12

Micah Gideon Modell


3 Answers

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

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

  });
like image 197
rubimbura brian Avatar answered Sep 23 '22 18:09

rubimbura brian


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,
  },
});
like image 35
Travnikov.dev Avatar answered Sep 22 '22 18:09

Travnikov.dev


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 />)}
like image 21
e109923 Avatar answered Sep 24 '22 18:09

e109923