importing i18n stays null and never provides a client

[bu3alwa]

I think I might have some misunderstanding on how to add a resource bundle on client side. I am following this section
https://github.com/isaachinman/next-i18next#loading-namespaces-dynamically-client-side

import { i18n } from 'next-i18next'

...

useEffect(() => {
  if (!assetType || !translationFile || !locale) return
  i18n?.addResourceBundle(locale, assetType?.id, translationFile)
})

...

const { t, ready } = useTranslation(assetType?.id)

and for some reason the i18n is always null and I never receive a client. My understanding is that next-i18next should initialize it and I shouldn't be adding an init that react-i18next recommends.

I have the withTranslation HOC wrapped on my _app and I have the config set similar to the default. Since the resource is never added the hook is never ready.

What am I missing to make the client initialize?

[isaachinman]

As answered in many other places, the global i18n object gets initialised when appWithTranslation is run.

[bu3alwa]

I have the HOC appWithTranslation but I am still getting null. Do you have any thoughts on what I could look into that I might be doin incorrect?

[bu3alwa]

Ok so I assumed that i18n would be initialized without the use of serverSideTranslation. Anyways, I appreciate the help.

In some use cases, you might want to load a translation file dynamically without having to use serverSideTranslations.

[bu3alwa]

@isaachinman So I read some other discussion and one of your answers said that i18n should auto initialize after mount. So I created a quick repo to try and reproduce it. I am sure I have something that I am not doing correctly and I am not sure what. If you could help me and take a look at it that would be appreciated https://github.com/bu3alwa/next-i18next-test.

I do get react-i18next:: You will need to pass in an i18next instance by using initReactI18next and I think it is related to the issue.

[bu3alwa]

Updated the repo to include the fix. Should be working now...