Universal loading with React and Redux

Hello,

I’m trying to create an application with localization that also uses universal loading. I feel like I’m almost there but I’m having an issue with loading the user’s language.

I am using 2 other modules to help me with that: https://github.com/i18next/i18next-node-fs-backend (instead of i18next-xhr-backend in your example) https://github.com/i18next/i18next-express-middleware

Here is what my i18n init looks like:

import i18n from 'i18next'
import Backend from 'i18next-node-fs-backend'
import { LanguageDetector } from 'i18next-express-middleware'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    whitelist: ['en','en-US','fr'],
    fallbackLng: 'en',

    // have a common namespace used around the full app
    ns: ['common'],
    defaultNS: 'common',

    debug: true,

    interpolation: {
      escapeValue: false // not needed for react!!
    },

    backend: {
      // path where resources get loaded from
      loadPath: 'locales/{{lng}}/{{ns}}.json',

      // path to post missing resources
      addPath: 'locales/{{lng}}/{{ns}}.missing.json',

      // jsonIndent to use when storing json files
      jsonIndent: 2
    }
  })

export default i18n

Then in my express server, I am taking i18n and using it with express so that I can detect the user’s language:

import i18n from './i18n'
import { I18nextProvider } from 'react-i18next'
var i18nMiddleware = require('i18next-express-middleware')

const app = express()
app.use(i18nMiddleware.handle(i18n))

app.get('*', (req, res) => {

  console.log('language ' + req.language)
  console.log('i18n language ' + req.i18n.language)
  console.log(req.i18n.t('app.appName'))

  match({ routes, location: req.url }, (err, redirect, props) => {
      const contentHtml = ReactServer.renderToString(
        <I18nextProvider i18n={ req.i18n }>
          <Provider store={store} key="provider">
            <RouterContext {...props} />
          </Provider>
        </I18nextProvider>
      )
      res.send(layout(contentHtml, store.getState()))
  })
})

I am able to grab req.language and req.i18n.language. Also, req.i18n.t() works for the keys I pass into it. The problem is when I try and pass in req.i18n into the I18nextProvider, it throws an error saying i18n.loadNamespaces is not a function.

Do you have any other suggestions about how to use this? Or maybe there’s an attribute I can add to I18nextProvider for the language to use for the user? Maybe something like this:

<I18nextProvider i18n={ i18n } language={req.language}>

Or maybe I’m going about this all wrong and you have another idea for Universally loading a React/Redux application with i18next capabilities.

Thanks for your help!

[jamuhl]

basically by adding all namespaces used in client to the ns: [‘common’] on server, plus adding preload: [‘en’,‘en-US’,‘fr’] to init options

[loudwinston]

@jamuhl Thanks! Glad to help out.