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?
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
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.
in your i18n
file add this, it will do the magic :)
.init({
react: {
useSuspense: false,
...
});
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,
},
});
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 />)}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With