TypeError: i18n.changeLanguage is not a function

[janhesters]

Describe the bug

If you set up a new Remix project one for one as its described in the README.md you get the following error:

TypeError: i18n.changeLanguage is not a function
    at http://localhost:3000/build/_shared/chunk-V75GTVXN.js:2459:14
    at commitHookEffectListMount (http://localhost:3000/build/entry.client-254GMFWE.js:16940:34)
    at commitPassiveMountOnFiber (http://localhost:3000/build/entry.client-254GMFWE.js:18186:17)
    at commitPassiveMountEffects_complete (http://localhost:3000/build/entry.client-254GMFWE.js:18154:17)
    at commitPassiveMountEffects_begin (http://localhost:3000/build/entry.client-254GMFWE.js:18144:15)
    at commitPassiveMountEffects (http://localhost:3000/build/entry.client-254GMFWE.js:18134:11)
    at flushPassiveEffectsImpl (http://localhost:3000/build/entry.client-254GMFWE.js:19487:11)
    at flushPassiveEffects (http://localhost:3000/build/entry.client-254GMFWE.js:19444:22)
    at http://localhost:3000/build/entry.client-254GMFWE.js:19325:17
    at workLoop (http://localhost:3000/build/entry.client-254GMFWE.js:699:42)

I suspect a bug in the package.

When you comment out the useChangeLanguage(locale); hook, it stops this error, however the title string is not translated when you navigate (initial load works). I suspect there are some steps missing in the README.

Your Example Website or App

https://github.com/janhesters/remix-i18next-bug

Steps to Reproduce the Bug or Issue

1. Run clone the repo mentioned above.
2. Run npm i.
3. Run npm run dev.
4. Go to localhost:3000.
5. See the crash.
6. Comment out useChangeLanguage(locale);
7. Navigate to the /home page using the link on the landing page.
8. See that title is not translated.

Expected behavior

No errors and translation of the greetings string.

Screenshots or Videos

Platform

• OS: macOS
• Browser: Brave
• Version: v1.46.140

Additional context

No response

[janhesters]

As for the second error, when I debug the client side, I get this warning after a navigation:

i18next.js:25 i18next::translator: key "title" for languages "en" won't get resolved as namespace "home" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

[heitorsilva]

@janhesters maybe you forgot to create the JSON files in the public folder... or maybe you're using a different key then home.

I have the same error above with i18n.changeLanguage is not a function, but translations are working fine for me... my project will probably not be able to switch languages on the fly, because of the error you shared... and I was not able to figure it out what it is.

[heitorsilva]

@janhesters I was able to switch languages even without the line that is failing for us...

this is a test Header component:

import { useTranslation } from "react-i18next";

export default function Header() {
  let { t, i18n } = useTranslation();

  const changeLanguage = (lng:string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <header>
      <img src="images/logo.png" title="..." alt="..." />
      <section className="languages">
        <button onClick={() => changeLanguage('en')}>en</button>
        <button onClick={() => changeLanguage('es')}>es</button>
        <button onClick={() => changeLanguage('pt-br')}>pt-br</button>
      </section>
    </header>
  );
}

works well when I click the buttons... I see the translation changing.

[janhesters]

@heitorsilva You were right, my setup was wrong. Only the title strings aren't working with getFixedT but I might file a different issue for this.

[nfragkos]

I have the error too and is happening only with react-i18next ^v12.0.0. I'm sticking with v11 for now ("react-i18next": "^11.18.6").

[Maxximus007]

Same issue here after installing latest versions of Remix, I18n and so on.
There was an additional warning too:

react-i18next:: You will need to pass in an i18next instance by using initReactI18next

Removing the line useChangeLanguage works for now, but hope for a solution.

Besides that, the new default setup is using hydrate and will revert to React 17. Probably better to replace it with
import { hydrateRoot } from 'react-dom/client'

[akamfoad]

Looks like the issue is starts with react-i18next@^12.0.0, I tried the base version 12.0.0 and the latest as well, atm 12.1.1 but its the same, others have the same issue too, for example i18next/next-i18next#1917

Though I'd love to see/get this fixed for everyone else, its always nice that you can DIY, remix-i18next's useChangeLanguage is a very simple utility hook:

remix-i18next/src/react.tsx

Lines 72 to 77 in 91d05bf

	export function useChangeLanguage(locale: string) {
	let { i18n } = useTranslation();
	useEffect(() => {
	i18n.changeLanguage(locale);
	}, [locale, i18n]);
	}

You can always put the body of the function in your root.jsx and it works just fine!

[sergiodxa]

I've been trying to fix it but I couldn't find a way to fix it from remix-i18next side, until I find a way I will keep this issue open and I suggest to follow @akamfoad suggestion and copy the useChangeLanguage hook code to your own app, luckily as he mentions is a simple and short hook.

[sergiocarneiro]

@sergiodxa It's weird that copying the exact same code fixes the issue. Could it be the way you are defining the dependencies?

[SimeonC]

Did some debugging on this, you can see the Replay recording here.

The problem comes from mixed ESM and commonjs detection in esbuild. I've opened a PR to change the package.json that worked when I changed it in node_modules.

[Diyouf]

could anyone please help me with this error i18n.changeLanguage is not available or not a function and I tried to solve like @akamfoad he said make it more clear about the calling the hook

let { locale } = useLoaderData();
 let { i18n } = useTranslation();

 useEffect(() => {

     i18n.changeLanguage(locale);

 }, [locale, i18n]);