Error: Should have a queue. This is likely a bug in React. Please file an issue

Question

I am using react-i18next. Sometime on init function component facing React issue. Any idea what may causing it?

My config

import i18n from "i18next";
import resources from "./locales";
import { initReactI18next } from "react-i18next";

const options = {
  debug: false,
  lng: "en",
  resources: resources,
  fallbacking: "en",
};

i18n.use(initReactI18next).init(options);

export default i18n;

My versions

"react": "^16.13.1",
"react-i18next": "^11.7.2",

Answer 1

stupid bug which was inited by myself. I was simple declaring before return dom component, like

const test = (props)=>{
  if(props.test){
     return <p>test</p>
  }
   const { t } = useTranslation("Test");//this must be on very top
  return <p>Main {t('test_variable')}</p>
}

I wish if react could be more clear in logging bugs

Answer 2

you might try this configuration, it works with me perfectly

 import i18n from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";  
 import { initReactI18next, Trans } from "react-i18next";
 import lang from "assets/lang";

 i18n.use(LanguageDetector)
 .use(initReactI18next)
 .init({
// we init with resources
 resources: lang,
 fallbackLng: "en",
 debug: true,

// have a common namespace used around the full app
 ns: ["basic"],
 defaultNS: "basic",

keySeparator: false, // we use content as keys

interpolation: {
  escapeValue: false,
},
 });

window.document.body.dir = i18n.t("dir");

  export default i18n;

  const Tr = (props) => (
  <Trans i18nKey={props.tr} {...props}>
  {props.children}
 </Trans>
  );

  Tr.tr = (key, ...rest) => i18n.t(key, ...rest);

 export { Tr };