Gatsby + i18next + hooks + suspense

[t-zander]

Description

I am sorry to open this here, but I cannot find any good guide about gatsby internationalization,and the only one I found seems to be outdated(

ReactDOMServer does not yet support Suspense.

when using i18next with useTranslation hook

Steps to reproduce

Create gatsby project, add following:
"i18next": "^19.0.2",
"i18next-browser-languagedetector": "^4.0.1",
"i18next-xhr-backend": "^3.2.2",
"react-i18next": "^11.2.7"

Expected result

Should be able to use i18next somehow, because for now it seems like I cannot use it with gatsby and it makes internationalization impossible.

Actual result

I got error during build Error: Minified React error #294; visit https://reactjs.org/docs/error-decoder.html?invariant=294 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

So I wonder if there is any way to use gatsby with i18next now at all?
For now I go about it this way const { t, i18n } = useTranslation("Header", { useSuspense: false });
Any suggestions on better ways of doing this?

Environment

gatsby: ^2.18.12 => 2.18.12
gatsby-background-image: ^0.9.12 => 0.9.12
gatsby-image: ^2.2.34 => 2.2.34
gatsby-plugin-manifest: ^2.2.31 => 2.2.31
gatsby-plugin-offline: ^3.0.27 => 3.0.27
gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16
gatsby-plugin-sass: ^2.1.26 => 2.1.26
gatsby-plugin-sharp: ^2.3.5 => 2.3.5
gatsby-source-filesystem: ^2.1.40 => 2.1.40
gatsby-transformer-sharp: ^2.3.7 => 2.3.7
npmGlobalPackages:
gatsby-cli: 2.8.22

[LekoArts]

Thank you for opening this!

As you have written correctly React doesn't support Suspense for SSR yet and hence Gatsby also can't provide that functionality. For now you'll need to use the option you mentioned. If you're adventurous you could try using: https://github.com/FormidableLabs/react-ssr-prepass

We're marking this issue as answered and closing it for now (as it's out of Gatsby's control) but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

[julienc91]

Stumbled upon this page while looking for an answer for the exact same problem. I found a workaround that is much less painful than having to add a parameter everytime useTranslation is invoked, which is using the useSuspense parameter directly during the i18n's instance initialization.

In my i18n.js file:

i18n
  .use([...]) // the usual stuff
  .init({
    [...] // more of the usual stuff
    react: {
      useSuspense: false
    }
  })

Now I can simply call const { t } = useTranslation() without any additional parameter.

---

Also, I found a way to replace Suspense using i18n's callback in order to avoid a "jumping text" situation when the translations files are not preloaded:

My layout.js:

import React, { useState } from 'react'
import Spinner from './spinner'
import { setCallback } from './i18n'

const Layout = props => {
  const { children, className } = props
  const [loading, setLoading] = useState(true)

  if (loading) {
    setCallback(() => setLoading(false))
    return <Spinner />
  }
  return (
    <>
      <Menu />
      <main className={className}>{children}</main>
      <Footer />
    </>
  )
}

My i18n.js:

let ready
let readyCallback

i18n
  .use([...]) // the usual stuff
  .init({
    [...] // more of the usual stuff
    react: {
      useSuspense: false
    }
  })
  .then(() => {
    ready = true
    if (readyCallback) {
      readyCallback()
    }
  })

export const setCallback = callback => {
  readyCallback = callback
  if (ready) {
    readyCallback()
  }
}

export default i18n

Hope it might help some of you!

[amitkrgupta094]

Hi All,
I tried using @julienc91 solution as gatsby does not support suspense. Turns out I hit another rabbit hole -
Inconsistent CSS Styling Differs Between gatsby develop and build - Why? #9911
.Just in case anyone stuck here, please refer to this

Thanks!