wrapPageElement error: You will need to pass in an i18next instance by using initReactI18next

[leduchung]

The translation works well, but when I put the Layout component (including NavBar and Footer) into the wrapPageElement in gatsby-browser.js, no language detected and following message is thrown in the console: You will need to pass in an i18next instance by using initReactI18next.

Do you have any hint to implement custom wrapPageElement with the plugin?

[andremonteiro95]

I managed to make it work with wrapPageElement, you can find a detailed post about the solution I came up with in my blog: https://andremonteiro.pt/gatsby-i18next-wrap-page-element/

[leduchung]

Great thanks! Your solution works well and nice explanation. I had a small difference is that my Layout component requires props to get data from graphQL, so I put in the props instead of undefined.

[leduchung]

Now I faced another case. The message appears at the first time opening the page (e.g. via a new Incognito windows in Chrome) when there is no language selected. Hence, the plugin fallback to English language which is /en instead of default language. Inspecting the console, there is no i18n in the props.

If I select one language, everything start to work fine.

[andremonteiro95]

@leduchung glad to hear that! do you have an implementation of wrapPageElement on both gatsby-ssr.js and gatsby-browser.js files?

[leduchung]

@andremonteiro95 yes I did both files. After a while, I found that it was another issue #89, so everything work fine for my site now. Thanks a lot!