react-i18next, gatsby, helmet - helmet tags not rendered during gatsby build

[w4mrohleder]

Describe the bug
I have problems with rendering meta tags using Helmet + react-i18next in Gatsby app.
Those are not present in static files after Gatsby built while using react-i18next (v8) withNamespaces() HOC. When I use Helmet in a component without this HOC, it works fine, but as soon as I export the component with the HOC, the tags are not in the rendered static file.

Occurs in react-i18next version
react-i18next: 8.0.7

To Reproduce
you can checkout this repo:
https://github.com/w4mrohleder/gatsby-i18next-helmet

There are two pages - index and page-2
src/pages/index.js - uses withNamespaces(), Helmet doesn't work
src/pages/page-2.js - doesn't use withNamespaces() HOC, Helmet tags appear in static files after Gatsby build

Expected behaviour
I would expect the meta tags specified with Helmet to appear in Gatsby's static files.

[w4mrohleder]

I've also tried updating react-i18next to v10 so I could try using new HOC withTranslations(), it works somehow better afterwards (with some additional code changes needed for v10) - I can see the tags in static files after build, but they are both in the same language, the default one = de. Also somehow URL translations are undefined:
french static file - public/fr/index.html

<title data-react-helmet="true">index-de</title>
<meta data-react-helmet="true" name="description" content="index-de-description" />
<meta data-react-helmet="true" property="og:title" content="index-de" />
<meta data-react-helmet="true" property="og:description" content="index-de-description" />

...

<p>drei</p><a class="" href="/undefined/undefined/">Go to page 2</a>

[jamuhl]

my guess the problem is here: https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/master/src/locales/config.js#L27 you load the translations using xhr if browser...how do you load the on serverside (During build time? And do you preload all of them before renderToString?)

[w4mrohleder]

I am using 'i18next-sync-fs-backend' on server:
https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/7a3e4123847b753b367f990cd6046337df974eb0/gatsby-ssr.js#L4

I'm also using loadNamespaces() there (line 21)

[jamuhl]

ok...that should work I guess...

so not sure - but still my guess is withNamespaces is not ready and therefore renders null (but not to sure)

v10 output looks better i guess and it's worth updating to it. How do you detect the language for serverside - or do you build per language? sorry never used gatsby myself

[w4mrohleder]

yes, separate for 2 languages, basically the build looks something like this:

so for v10, I moved loadNamespaces() from gatsby-ssr.js to locales/config.js as I couldn't use it the same way as in v8
https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/update_react-i18next/gatsby-ssr.js
https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/update_react-i18next/src/locales/config.js

• I had to do 'i18n.changeLanguage(lang)' in gatsby-browser.js in v10:
  https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/cdec5c3e2721652e76efd7bed9f11cc6a97c179c/gatsby-browser.js#L56

then the Helmet works, but those other errors show up - https://github.com/i18next/react-i18next/issues/783#issuecomment-472438360

[jamuhl]

how you set language on serverside / build

[jamuhl]

Using https://github.com/i18next/i18next-browser-languageDetector for browser and a custom detector for the build setting the language based on https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/update_react-i18next/gatsby-node.js#L52

[w4mrohleder]

languages are set here during build:
https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/cdec5c3e2721652e76efd7bed9f11cc6a97c179c/gatsby-node.js#L39

[jamuhl]

Will need to checkout your repo tomorrow and have a deeper look

[w4mrohleder]

one thing that could've caused the problems might be this:
https://github.com/w4mrohleder/gatsby-i18next-helmet/compare/update_react-i18next#diff-2662d96fb8f8c0124698da892a736166
I've moved the .loadNamespaces() after react-i18next update to v10 to gatsby-browser.js, because I could not use it chained after .init() like that anymore in v10

[jamuhl]

no...it's not needed you do not need to call loadNamespaces...it's already done by the init call

you just not set the language on serverside...like i said:

[jamuhl]

can you grant me write access to this...i could add a working version

[jamuhl]

https://github.com/w4mrohleder/gatsby-i18next-helmet/commit/bc4703b98d5b34812ac2cf25e6b184a4095b9f53

[w4mrohleder]

thank you for your help, the Helmet works fine now - the tags are correctly rendered in static files.
the only thing that doesn't work with v10 are links, do you have any idea why? I am using a custom Link component for that, which worked with v8:
https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/update_react-i18next/src/locales/Link.js

with v10 those links are undefined:

for fr language, the link should be /fr/page-2-fr/

[jamuhl]

you're using import i18n from 'i18next'
https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/update_react-i18next/src/locales/Link.js#L3
https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/update_react-i18next/src/utils/helpers.js#L1

which is not the i18n instance used on serverside - also use the hook like https://github.com/w4mrohleder/gatsby-i18next-helmet/blob/update_react-i18next/src/pages/index.js#L11 -> you get the i18n instance used -> pass that to the utils

[jamuhl]

As a rule...do not directly import i18n down the road...only pass i18n in Provider from there grab it either as prop (withTranslation HOC) or as return value of hook

[w4mrohleder]

oh ok, I will try that. thank you so much for your help again

[jamuhl]

do you have any plans to create a gatsby-i18next like they did with next-i18next for next.js? https://github.com/isaachinman/next-i18next

would love to see this happen...but as i personally do not use gatsby it's not easy to commit myself into creating it as i prefer creating stuff i use myself

[jamuhl]

Any update on this?

[w4mrohleder]

I would also love to have some basic boilerplate/plugin for gatsby-i18next apps, but at the same time, the current code I have feels and looks kind of hacky (as opposed to our previous implementation with react-i18next v8).
also, my Gatsby knowledge is still not really 100%, so I guess I will think about it if/when I'll be doing some new project from scratch again - I'll need to do more Gatsby projects at first to get to know it better.

[jamuhl]

did you know https://github.com/ikhudo/gatsby-i18n-plugin#readme

[w4mrohleder]

yeah, I've checked that one, but it uses i18next v 11.6.0 and from what I saw, there wasn't even t() function back then, so they had to use the HOC.
also, I didn't like the GraphQL query syntax that needs to be used on the bottom of every component/page:
https://github.com/ikhudo/gatsby-i18n-plugin/blob/master/starters/gatsby-starter-i18next/src/pages/index.js

[jamuhl]

closing this for now...feel free to reopen or adding a new issue if there is something we need to look at