wrapPageElement error: You will need to pass in an i18next instance by using initReactI18next
leduchung opened this issue · 5 comments
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?
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/
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.
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.
@leduchung glad to hear that! do you have an implementation of wrapPageElement on both gatsby-ssr.js and gatsby-browser.js files?
@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!