React-i18next: I18nextWithTranslation suspended while rendering, but no fallback UI was specified

[margozzi]

I wrote it up on Stack Overflow before I figured out how to post here.

https://stackoverflow.com/questions/54951422/error-i18nextwithtranslation-suspended-while-rendering-but-no-fallback-ui-was

I am using v10 and only using the HOC withTranslation. It looks so simple, yet I am not able to get it working. I suspect there is something simple.

[jamuhl]

Like comment said from samMeow - https://codesandbox.io/s/10j2xw6j3 works - so we really need a sample to reproduce your issue. Configuration looks alright from what you posted...so take the time to extend the codesandbox to your breaking point.

Are you using react-portal, modal, ...?!?

[margozzi]

We are evaluating React as a possible path to go down along with Angular. I am new to React. I wanted to make sure we could do I18N along with many other things. Sadly, I have no idea what "react-portal" is. I am not familiar with modal either. So, having said that, I would assume I am not using them.

Trouble with reproducing errors is that simplification sometimes makes the error go away. For instance, I am using the xhr request to get the translations. How am I going to simulate the back end? I am not even familiar with codesandbox. Can I just edit the files in place somehow?

Sorry to be so ignorant on much of this. The I18N package "seems" like it does everything I want/need. But it is hard if I can't even get to fist base. Please guide me a bit more and I will try and get you what you need.

Also, is this the proper way to wrap a Component that is already wrapped?
export default withTranslation()(withCookies(Login));

[jamuhl]

Wrapping is ok...you can use something like lodash flow or compose (not sure if compose still exists) to wrap multiple HOCs more nicely...but withTranslation()(withCookies(Login)) looks correct and should be no issue.

To find the cause could you try:

• removing the BrowserRouter
• removing the CookiesProvider

to see what causes to prevent the Suspense you have there.

[margozzi]

I removed the BrowserRouter and CookiesProvider and here is what I see now.
The app tried to load the en-US bundle via a REST call and gets a 404 as I only have en & de bundles.
The app initially renders fine, but then quickly completely reloads and renders poorly.

Serving up the same file at /locals/en-US gets rid of the 404 errors, but the behavior is the same. No improvement.

[jamuhl]

that are network errors - not runtime errors. As en get loaded all will be fine as that is used as a fallback to en-US before fallbacking to the fallbackLng.

At this point really need some extension of the sample https://codesandbox.io/s/10j2xw6j3 to reproduce

[margozzi]

I added .use(LanguageDetector) and added i18next-browser-languagedetector to the dependencies.
My app uses SWITCH and ROUTE so I tried to add those to App.js but that made the app no longer render. Not sure what I broke there. In my app I didn't specify a language assuming the language detector would discover it. So I removed the lang setting in i8n.js I need alittle help making the app work again.

[jamuhl]

should be enough...having a detector and no lng in init options

[margozzi]

https://codesandbox.io/s/p5lrmzn8rm I am not sure why there are two different one. When I save a change does it change the URL?

[jamuhl]

https://codesandbox.io/s/qqnlz82y49

works -> only change i made import UnderConstruction from "./UnderConstruction.jsx"; instead of import { UnderConstruction } from "./UnderConstruction.jsx" as it is a default export

[margozzi]

OK, so nothing we have tried to replicate has failed, yet my poor app refuses to run. How do you feel about me sending my entire prototype project to you? I mean, it is not all that much bigger than what we have on code sandbox. It will try and make a few REST calls that you don't have a back end to. It might be OK for them to fail, I don't know.

[margozzi]

As of now, if I comment out any code that uses withTranslation HOC, the app will come up. For some reason, as soon as it comes up and looks good, it completely re-renders again. There are no errors in the console. The instant I add back in a withTranslations I get a different error.

`Download the React DevTools for a better development experience: https://fb.me/react-devtools
bundle.js:9957 i18next::backendConnector: loaded namespace translation for language en {404: "404 Page Not Found", title: "React PrimeNG", signIn: "Sign In", common: {…}, navigation: {…}, portals: {…}}
bundle.js:9957 i18next: languageChanged en
bundle.js:9957 i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1), …}
react-dom.development.js:22132 Download the React DevTools for a better development experience: https://fb.me/react-devtools
react.development.js:85 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
at invariant (webpack-internal:///./node_modules/react/cjs/react.development.js:85:19)
at resolveDispatcher (webpack-internal:///./node_modules/react/cjs/react.development.js:1470:32)
at useState (webpack-internal:///./node_modules/react/cjs/react.development.js:1494:24)
at useTranslation (webpack-internal:///./node_modules/react-i18next/dist/es/useTranslation.js:54:73)
at I18nextWithTranslation (webpack-internal:///./node_modules/react-i18next/dist/es/withTranslation.js:17:99)
at renderWithHooks (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:40701:18)
at mountIndeterminateComponent (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:42678:13)
at beginWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:43283:16)
at performUnitOfWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:46970:12)
at workLoop (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47010:24)
at HTMLUnknownElement.callCallback (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:28011:14)
at Object.invokeGuardedCallbackDev (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:28061:16)
at invokeGuardedCallback (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:28118:31)
at replayUnitOfWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:46236:5)
at renderRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47126:13)
at performWorkOnRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48000:7)
at performWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47912:7)
at performSyncWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47886:3)
at requestWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47755:5)
at scheduleWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47569:5)
at scheduleRootUpdate (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48230:3)
at updateContainerAtExpirationTime (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48258:10)
at updateContainer (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48315:10)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48611:3)
at legacyRenderSubtreeIntoContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21988:16)
at Object.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22041:16)
at eval (webpack-internal:///./src/index.js:19:50)
at Module../src/index.js (https://localhost:3000/static/js/main.chunk.js:165:1)
at __webpack_require__ (https://localhost:3000/static/js/bundle.js:782:30)
at fn (https://localhost:3000/static/js/bundle.js:150:20)
at Object.0 (https://localhost:3000/static/js/main.chunk.js:212:18)
at __webpack_require__ (https://localhost:3000/static/js/bundle.js:782:30)
at checkDeferredModules (https://localhost:3000/static/js/bundle.js:46:23)
at Array.webpackJsonpCallback [as push] (https://localhost:3000/static/js/bundle.js:33:19)
at https://localhost:3000/static/js/main.chunk.js:1:57
invariant @ react.development.js:85
resolveDispatcher @ react.development.js:1470
useState @ react.development.js:1494
useTranslation @ useTranslation.js:44
I18nextWithTranslation @ withTranslation.js:8
renderWithHooks @ bundle.js:40701
mountIndeterminateComponent @ bundle.js:42678
beginWork @ bundle.js:43283
performUnitOfWork @ bundle.js:46970
workLoop @ bundle.js:47010
callCallback @ bundle.js:28011
invokeGuardedCallbackDev @ bundle.js:28061
invokeGuardedCallback @ bundle.js:28118
replayUnitOfWork @ bundle.js:46236
renderRoot @ bundle.js:47126
performWorkOnRoot @ bundle.js:48000
performWork @ bundle.js:47912
performSyncWork @ bundle.js:47886
requestWork @ bundle.js:47755
scheduleWork @ bundle.js:47569
scheduleRootUpdate @ bundle.js:48230
updateContainerAtExpirationTime @ bundle.js:48258
updateContainer @ bundle.js:48315
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ bundle.js:48611
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21988
render @ react-dom.development.js:22041
(anonymous) @ index.js:9
./src/index.js @ main.chunk.js:165
__webpack_require__ @ bundle.js:782
fn @ bundle.js:150
0 @ main.chunk.js:212
__webpack_require__ @ bundle.js:782
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
index.js:1446 The above error occurred in the component:
in I18nextWithTranslation (at src/index.js:13)
in Router
in BrowserRouter (at src/index.js:12)
in CookiesProvider (at src/index.js:11)
in Suspense (at src/index.js:10)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
function.console.(anonymous function) @ index.js:1446
logCapturedError @ bundle.js:44775
logError @ bundle.js:44811
update.callback @ bundle.js:45723
callCallback @ bundle.js:44091
commitUpdateEffects @ bundle.js:44130
commitUpdateQueue @ bundle.js:44121
commitLifeCycles @ bundle.js:45041
commitAllLifeCycles @ bundle.js:46394
callCallback @ bundle.js:28011
invokeGuardedCallbackDev @ bundle.js:28061
invokeGuardedCallback @ bundle.js:28118
commitRoot @ bundle.js:46606
(anonymous) @ bundle.js:48076
unstable_runWithPriority @ bundle.js:56713
completeRoot @ bundle.js:48075
performWorkOnRoot @ bundle.js:48004
performWork @ bundle.js:47912
performSyncWork @ bundle.js:47886
requestWork @ bundle.js:47755
scheduleWork @ bundle.js:47569
scheduleRootUpdate @ bundle.js:48230
updateContainerAtExpirationTime @ bundle.js:48258
updateContainer @ bundle.js:48315
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ bundle.js:48611
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21988
render @ react-dom.development.js:22041
(anonymous) @ index.js:9
./src/index.js @ main.chunk.js:165
__webpack_require__ @ bundle.js:782
fn @ bundle.js:150
0 @ main.chunk.js:212
__webpack_require__ @ bundle.js:782
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
bundle.js:47970 Uncaught Invariant Violation: Hooks can only be called inside the body of a function component. (https://fb.me/react-invalid-hook-call)
at invariant (webpack-internal:///./node_modules/react/cjs/react.development.js:85:19)
at resolveDispatcher (webpack-internal:///./node_modules/react/cjs/react.development.js:1470:32)
at useState (webpack-internal:///./node_modules/react/cjs/react.development.js:1494:24)
at useTranslation (webpack-internal:///./node_modules/react-i18next/dist/es/useTranslation.js:54:73)
at I18nextWithTranslation (webpack-internal:///./node_modules/react-i18next/dist/es/withTranslation.js:17:99)
at renderWithHooks (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:40701:18)
at mountIndeterminateComponent (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:42678:13)
at beginWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:43283:16)
at performUnitOfWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:46970:12)
at workLoop (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47010:24)
at renderRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47093:7)
at performWorkOnRoot (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48000:7)
at performWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47912:7)
at performSyncWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47886:3)
at requestWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47755:5)
at scheduleWork (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:47569:5)
at scheduleRootUpdate (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48230:3)
at updateContainerAtExpirationTime (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48258:10)
at updateContainer (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48315:10)
at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (https://localhost:3000/cgadmin-react-primeng/dist/bundle.js:48611:3)
at legacyRenderSubtreeIntoContainer (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:21988:16)
at Object.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:22041:16)
at eval (webpack-internal:///./src/index.js:19:50)
at Module../src/index.js (https://localhost:3000/static/js/main.chunk.js:165:1)
at __webpack_require__ (https://localhost:3000/static/js/bundle.js:782:30)
at fn (https://localhost:3000/static/js/bundle.js:150:20)
at Object.0 (https://localhost:3000/static/js/main.chunk.js:212:18)
at __webpack_require__ (https://localhost:3000/static/js/bundle.js:782:30)
at checkDeferredModules (https://localhost:3000/static/js/bundle.js:46:23)
at Array.webpackJsonpCallback [as push] (https://localhost:3000/static/js/bundle.js:33:19)
at https://localhost:3000/static/js/main.chunk.js:1:57
invariant @ react.development.js:85
resolveDispatcher @ react.development.js:1470
useState @ react.development.js:1494
useTranslation @ useTranslation.js:44
I18nextWithTranslation @ withTranslation.js:8
renderWithHooks @ bundle.js:40701
mountIndeterminateComponent @ bundle.js:42678
beginWork @ bundle.js:43283
performUnitOfWork @ bundle.js:46970
workLoop @ bundle.js:47010
renderRoot @ bundle.js:47093
performWorkOnRoot @ bundle.js:48000
performWork @ bundle.js:47912
performSyncWork @ bundle.js:47886
requestWork @ bundle.js:47755
scheduleWork @ bundle.js:47569
scheduleRootUpdate @ bundle.js:48230
updateContainerAtExpirationTime @ bundle.js:48258
updateContainer @ bundle.js:48315
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ bundle.js:48611
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21988
render @ react-dom.development.js:22041
(anonymous) @ index.js:9
./src/index.js @ main.chunk.js:165
__webpack_require__ @ bundle.js:782
fn @ bundle.js:150
0 @ main.chunk.js:212
__webpack_require__ @ bundle.js:782
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous) @ main.chunk.js:1
logger.js:21 i18next::backendConnector: loaded namespace translation for language en {404: "404 Page Not Found", title: "React PrimeNG", signIn: "Sign In", common: {…}, navigation: {…}, portals: {…}}
logger.js:21 i18next: languageChanged en
logger.js:21 i18next: initialized {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1), …}`

[jamuhl]

you can share a download link to my email jan.[email protected] - will try and hopefully see something.

[belliAndrea]

Got the same problem "...suspended while rendering, but no fallback UI was specified." as soon as i switched from embedded js to server loaded json. I'm really into switching back to v9.

[jamuhl]

@belliAndrea if you got embedded JSON there is no loading -> no need to suspense for not yet loaded translations.

As an option -> set i18next.options.react.useSuspense to false -> you will get a not ready flag but no suspense triggered...

But actually following the sample or codesandbox should be easy enough...

[laurisbernhart]

We are also facing this issue!

2 Cases:

1) start with landing page (only using translations preloaded with react app) -> after init we request additional translations -> go to page, where additionally loaded translations needed -> WORKING

2) start with any other app internal page (that needs translations from server) -> BLANK / NOT_WORKING

settings useSuspense to false, does not change anything.

Apart from that thank you for this otherwise very nice library @jamuhl !

[jamuhl]

@laurisbernhart could you provide a sample to reproduce...not sure why there should be a difference between 1. and 2.

[margozzi]

In preparing to give more source code and knowing you won't have a back end to make requests against, I tried my app with the back end that I proxy to, shut off. The dang app worked WITH translations!? So, why would that be? It seems like having to make an xhr request for the translation file is doing something different? I am not exactly sure how to read the network request. I am assuming it is being loaded locally as there is no back end anymore. Has anyone tried this using an IDE? I use VS Code and setting up a proxy for the REST calls to get data as well as the language files?

[laurisbernhart]

@jamuhl Thanks for your quick reply.
Short on time, so for now we will put all translations into client..
Will try to reproduce it in a simple app these days and notify you!

Not sure either.. could you please explain the expected behaviour?
I would assume, that if a namespace is not loaded, keys should be shown as fallbacks - is that assumption correct? (EDIT: given useSuspense is set to false)

[margozzi]

Running the code in Visual Studio Code in the debugger.

Here is what I see when my back-end is running and responding to requests:

And here it is when the back-end is no longer running:

[laurisbernhart]

@margozzi
Which versions to you have for react and react-dom?

I had this error message too and updating BOTH to 16.8.0 fixed it for me

[margozzi]

"dependencies": {
"axios": "^0.18.0",
"classnames": "^2.2.6",
"file-loader": "^2.0.0",
"formik": "^1.5.1",
"i18next": "^15.0.4",
"i18next-browser-languagedetector": "^3.0.1",
"i18next-xhr-backend": "^2.0.1",
"primeicons": "^1.0.0",
"primereact": "^3.1.0",
"react": "^16.8.3",
"react-cookie": "^3.0.8",
"react-dom": "^16.8.3",
"react-i18next": "^10.2.0",
"react-router-dom": "^4.3.1",
"react-scripts": "^2.1.3",
"react-transition-group": "^2.5.3",
"reflexbox": "^3.0.1"
},

[jamuhl]

@laurisbernhart yes with useSuspense false it should return keys for the t call (having not yet loaded translations)

[jamuhl]

@margozzi really strange...idk...i use visual studio code myself...not having any issue...but i do not run my apps through it...just using webpack's dev server

[margozzi]

I am confused as to why the translation files are being picked up from the local file system rather than making the REST request. Does it default back to files if the xhr calls aren't working? I figured if you configure the Backed xhr plugin, then it always uses that and nothing was mentioned about a fallback to files.

Also, I was going through the plugin documentation and they seem to indicate XHR rather than Backend. Sadly, when I changed to XHR, it made no difference. It must be an alias for Backend.

So, I am basically stuck and I don't know why. Things seem to work when the translation file is loaded locally and not via XHR.

[jamuhl]

@margozzi so we currently know - the cause of the problem is the proxy you're using. No there is no fallback for loading - if you're using the xhr backend it takes xhr to load from https://github.com/i18next/i18next-xhr-backend/blob/master/src/index.js#L6 as long not defined different.

My guess:

• you try loading your translations via xhr from your pubic folder
• Your proxy does reroute those requests (https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development)

Also why you define <script src="dist/bundle.js"></script> in your index.js -> loading bundles scripts and hot during developemen?!?

So as a solution:

• have a custom proxy not rerouting /locales to your backend server
• use a CORS enabled source as backend and change path to it depending on prod / non prod
• use a CORS source for translations -> eg. https://locize.com with https://github.com/locize/i18next-locize-backend

[Nowheresly]

I ran into some similar issue.

The problem was that my fallback component (defined in <Suspense fallback={<MySpinner/>} >) was itself using useTranslation...
The fallback component (<MySpinner>) must NOT import something from 'react-i18next', otherwise some fetching append outside <Suspense >, leading to the dreadful I18nextWithTranslation suspended while rendering, but no fallback UI was specified error.

In case it may help. At least, it fixed the issue for me...

[margozzi]

This was the key:
I am not sure why that was there. More than one of us work on this project.

It is kind if unfortunate that the error messages seen where not helpful in any way :-(
I am very thankful for the help you provided and I am now seeing things work as expected!

You can close this one out.

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project :pray:

[nicgirault]

@jamuhl debugging was a real pain until I read your message about setting useSuspense to false. Otherwise, with create-react-app, we get a blank screen and no clear error in the console. I would suggest to do something about it.

[jamuhl]

@nicgirault what you mean...you get a warning from react there is no suspense component - could you provide a sample giving a blank screen and no error...would love to reproduce this.

[nicgirault]

I couldn't reproduce in a sandbox so far. I'll try again later

[jamuhl]

@nicgirault thanks for taking the time providing a sandbox

[AugustoAmaral]

This is consuming my soul...
When i use hooks, it works perfectly, but when i try to use HOC, render prop or trans component this error appears.

[jamuhl]

@AugustoAmaral please make a sample on codesandbox to reproduce...99.9% of the cases it's some mismatch in react version, strange build setup, or some other small mistake ;)

[taviroquai]

Just got caught by this... moving to version 9. Don't have time right now to see whats going wrong...

[PaulInglis]

I managed to solve it by wrapping the App in a Suspense tag.

The 'jest-test' example project did't work for me straight out the box, I had to do this in order for it to work:

ReactDOM.render(<Suspense fallback="loading..."><App /></Suspense>, document.getElementById('root'));

Maybe that will help someone?

[mlimberg]

I have the same Uncaught (in promise) Error: ne suspended while rendering, but no fallback UI was specified. issue.

We are doing SSR with create-react-app (react & react-dom 16.8+)
We are not using suspense.

I set react: { useSuspense: false } and it still does not work. I get a flash of my app with the proper translation but then the error in the console. Here are some of the configs:

i18n Instance (client):

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import XHR from 'i18next-xhr-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

const options = {
  fallbackLng: 'en',
  ns: ['translations'],
  defaultNS: 'translations',
  order: ['navigator'],
  debug: true,
  caches: [],
  excludeCacheFor: ['cimode'],
  interpolation: {
    escapeValue: false, // not needed for react!!
    formatSeparator: ',',
    format: (value, format, lng) => {
      if (format === 'uppercase') return value.toUpperCase()
      return value
    },
  },
  react: {
    useSuspense: false,
  },
  detection: {
    order: ['navigator', 'cookie'],
  },
  wait: process && !process.release,
}

// for browser use xhr backend to load translations and browser lng detector
if (process && !process.release) {
  i18n
    .use(XHR)
    .use(initReactI18next)
    .use(LanguageDetector)
}

if (!i18n.isInitialized) {
  i18n.init(options)
}

export default i18n

i18n (server):

import Backend from 'i18next-node-fs-backend'
import { LanguageDetector } from 'i18next-express-middleware'
import i18n from '../src/lib/i18nClient'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    preload: ['es', 'en'],
    fallbackLng: 'en',

    debug: true,

    interpolation: {
      escapeValue: false,
    },
    detect: {
      order: ['navigator'],
    },
    ns: ['translations'],
    defaultNS: 'translations',
    react: {
      useSuspense: false,
    },
    backend: {
      loadPath: 'public/locales/{{lng}}/{{ns}}.json',
      jsonIndent: 2,
    },
  })

export default i18n

entry point of our client:

import 'react-app-polyfill/ie9'
import React from 'react'
import { render, hydrate } from 'react-dom'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Loadable from 'react-loadable'
import { Frontload } from 'react-frontload'
import { useSSR } from 'react-i18next'
import App from './App'

import './lib/i18nClient'

const Application = () => {
  useSSR(window.initialI18nStore, window.initialLanguage)

  return (
    <Router>
      <Frontload noServerRender={true}>
        <App />
      </Frontload>
    </Router>
  )
}

const rootEl = document && document.getElementById('root')

if (rootEl && rootEl.hasChildNodes()) {  
  Loadable.preloadReady().then(() => {
    console.log('preloadReady hit!')
    hydrate(Application, rootEl)
  })
} else {
  console.log('Regular old Render')
  render(Application, rootEl)
}

Lastly in the server I am (supposedly) preloading the locale files and user language based on the request using:

const useri18n = req.i18n.cloneInstance()
useri18n.changeLanguage(req.language)

const initialI18nStore = {}
req.i18n.languages.forEach(l => {
  initialI18nStore[l] = req.i18n.services.resourceStore.data[l]
});

const initialLanguage = useri18n.language

I then set initialLanguage and initialI18nStore on the window in the html scripts I send back from the server.

Have tried sooo many things (including trying Suspense) and cannot get the app to render cleanly. Any ideas based on this? Any issues you see in the code I've provided?? Please help! Thank you

[jamuhl]

@mlimberg on server i18n instance you did not set useSuspense to false

[mlimberg]

it's nested in the react object in the server code snippet above. I just tried setting useSuspense: false on the main options object as well and still getting the Suspense error.

[jamuhl]

@mlimberg on serverside you're preloading all languages and namespaces...even having set useSuspense: true it should not actually trigger a suspense as all translations are ready at time of rendering...so can't say from seeing your code snippets -> but something is wrong in your setup

[paulrberg]

Setting:

react: {
  useSuspense: false,
},

Makes the app not crash anymore, but, except for Chromium-based browsers, translations have a ~1 second delay because of this error: i18next::translator: missingKey. This causes glitches in the UI.

Is there any way to fix this? I'm not doing anything particularly different outside the recommended flow in the docs. I'm just using the withTranslation HOC in many child components.

[jamuhl]

@PaulRBerg in production you won't have any missings i hope...this only appears if a key was not found in your translation file

[paulrberg]

The error persists in production in both Safari and Firefox. It's fine in Chrome and Brave.

It's not caused by missing keys in the translation file, I'm certain that they are all there. The issue is related to loading the default translations file, there seems to be some significant delay with that.

Using version 10.10.0. Here is my configuration file:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import XHR from "i18next-xhr-backend";

import { initReactI18next } from "react-i18next";

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github.com/i18next/i18next-xhr-backend
  .use(XHR)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    backend: {
      loadPath: "/locales/{{lng}}.json",
    },
    debug: process.env.NODE_ENV !== "production",
    lng: "en",
    fallbackLng: "en",
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

[jamuhl]

@PaulRBerg you disabled suspense - so you're responsible to not render / access t before ready

https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

[jamuhl]

stetting saveMissing: false and using the handler for missing could help too: https://www.i18next.com/overview/configuration-options#missing-keys

[Randgalt]

This https://www.i18next.com/overview/api#addresourcebundle says:

So you should wait for init to complete (wait for the callback or promise resolution) before using the t function!

But I don't see that in the examples. Like many here I come to this library with almost no React knowledge. I'm getting the same error that everyone else is getting. Your docs need improvement. In the meantime I'll look for an easier to use library.

[jamuhl]

@Randgalt you might be aware that https://react.i18next.com/latest/usetranslation-hook does this - while for most UI frameworks it can be an option to wait for the init callback it's not the only solution to make sure translations are loaded. For react we solved it with the useTranslation hook, withTranslation HOC as it gives you more control and option to load translations on demand when needed (code splitting)

[jamuhl]

@Randgalt this is an Open Source project...so contributions to improve any aspect is very welcome (or like you said...no one forces you to use it)

[Randgalt]

I am using useTranslation() so I'm not sure what else to do.

this is an Open Source project

Of course (I manage one myself). In this instance, though, I don't have the skills to contribute - I barely know React. This issue, though, seems to have hit a lot of people. I don't know a way around it currently.

[jamuhl]

@Randgalt this thread is a mixed issues so this is not about one problem...and most are caused by...idk react...you not even describe what problem you got...just add a comment...my reply something is wrong in your code - it's not my duty to fix your code.

And like you can get out of the docs

• react-i18next uses Suspense (don't know Suspense read the react docs about it) to trigger a fallbackUI on the Suspense component when ever i18next is not initialized or there are pending load (async) of translations -> https://github.com/i18next/react-i18next/blob/master/example/react/src/App.js#L59 (The suspense must be outside (higher in the hierarchy) of the component using useTranslation -> as using Suspense means nothing more than throw an error that is a Promise which resolves when the UI should resume rendering)

• you set useSuspense false...nothing waits / suspended the rendering -> the app render fallback translations (so i18next warns you - something might be wrong - as this is not what you're users like to see...flickering from some keys to correct translations, plus its a wasted rendering). But read https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

which would end in something like:

function MyComponent() {
  const { t, i18n, ready } = useTranslation('ns1', { useSuspense: false });

  if (!ready) return 'oupsy';

  return <div>{t('key')}</div>
}

Hope that helps? Else be more specific what problem you got.

[Randgalt]

I get the exact problem listed it the OP (https://stackoverflow.com/questions/54951422/error-i18nextwithtranslation-suspended-while-rendering-but-no-fallback-ui-was) when I try to mimic any examples I could of using react-18next. If I set useSuspense: false I don't get the associated message it outputs the literal ID. Anyway, I'll use a different library. Thanks.

[jamuhl]

Do you have a Suspense component surrounding the component? Yes - NO?

[Randgalt]

It appears I'm using React 16.3 and that feature isn't available to me (per: https://reactjs.org/docs/concurrent-mode-suspense.html)

[jamuhl]

https://github.com/i18next/react-i18next#requirements ---> you owe me a drink for my wasted time 😉

[Randgalt]

Sorry to piss you off. I'm just someone trying to use your library. I didn't (nor would I be able) to read every word of the site. I'll happily try to upgrade now that I know the issue.

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

If you liked my support / work - I would enjoy a coffee sponsored using the “:purple_heart:Sponsor Button”.

There are many ways to help this project :pray:

[jamuhl]

So having this issue:

• check you got same react, react-dom version and versions >16.8.0
• you really wrapped the component using withTranslation, useTranslation with a Suspense Component (not using Suspense inside it)
• not use useTranslation, withTranslation inside the fallbackUI (at least as long you're not sure your know what you're doing)
• use useSuspense: false -> but handle ready like:

function MyComponent() {
  const { t, i18n, ready } = useTranslation('ns1', { useSuspense: false });

  if (!ready) return 'oupsy';

  return <div>{t('key')}</div>
}