initReactI18next error

[rahad06]

Describe the bug

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

Your Example Website or App

gitlab repo

Steps to Reproduce the Bug or Issue

on gitlab

Expected behavior

translated components, im seing the error above and no translation

Screenshots or Videos

No response

Platform

• OS: windows
• Browser: [Chrome, Firefox]
• Version: [23.7.8]

Additional context

No response

[aniforprez]

What error exactly are you getting here? The screenshots don't show anything aside from the yellow warning lines but I'm not sure what the content of the warning is.

At first glance, you are probably not initialising the I18NextProvider context component because you are wrapping it in the then block but not passing the new instance of i18next that you got after your promise was resolved. You are using await already so the then block is unnecessary.

You can just do:

await i18next
    .use(initReactI18next)
	...
	.init({
		...
	});

startTransition(() => {
    hydrateRoot(
      document,
      <I18nextProvider i18n={i18next}>
		...
      </I18nextProvider>,
    );
  });
}

[rahad06]

thanks for the help, i removed the promise, but this is the warning im getting even though i am using .use(itnitReactI18next)
this is the warning:
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
@aniforprez

[aniforprez]

It's a little confusing but if you're using the i18next that you exported from .i18n.server then that's the wrong i18next. If you check the instructions, you need to use the i18next exported by the i18next package in entry.client.js.

//entry.client.js

import i18next from "i18next"

async function hydrate() {
  await i18next
    .use(initReactI18next)
	...

If you go through the instructions again and follow them exactly, it should work as normal.