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

Viewed 15800

issue

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",
3 Answers

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

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

I've also had such a problem and finally I found that the main reason of this problem is using hooks in wrong place, you need to use your hook in parent component and not the child one. For example, you have a todo list and todo component, you have to use it in todo list and not in todo.

Related