Why to use WithI18n instead of i18n object directly

Hi, I encounter a problem when I use WithI18n, I got the following messages:

./src/App1/routes/Home/components/HomeView.js
Module build failed: SyntaxError: Unexpected token, expected ; (6:45)

  4 | import './HomeView.scss'
  5 | 
> 6 | export const HomeView = WithI18n()({ i18n }) => {
    |                                              ^
  7 |   return (
  8 |     <div>
  9 |       <h3><Trans>Welcome App 1!</Trans></h3>

 @ ./src/App1/routes/Home/index.js 1:0-45
 @ ./src/App1/routes/index.js
 @ ./src/App1/main.js

The code is

import React from 'react'
import { WithI18n, Trans } from 'lingui-react'

export const HomeView = WithI18n()({ i18n }) => {
  return (
    <div>
      <h3><Trans>Welcome App 1!</Trans></h3>
      <img
           src="/static/logos/logo_client.png"
           alt={i18n.t`Logo client`}
           />
    </div>
  )
}

export default HomeView

My configuration is:

├─┬ babel-preset-lingui-react@1.0.1
│ ├── babel-plugin-lingui-transform-js@1.0.1
│ └── babel-plugin-lingui-transform-react@1.0.1
├─┬ lingui-cli@1.0.4
│ ├── babel-plugin-lingui-extract-messages@1.0.2
│ ├─┬ lingui-conf@0.8.1
├─┬ lingui-i18n@1.1.0
│ └── lingui-formats@1.0.1
├── lingui-react@1.0.2

And I use Redux with this starter kit

So I tried import i18n from 'lingui-i18n' and everything works.

So why one should use WithI18n ?

[danielkcz]

On the note of the subject, I made a discovery of how to do that. It’s a MobX based solution which feels the easier for me, but it can be surely tackled with various other approaches. They key point here is to have a i18nProvider to re-render everything when language changes.

import { Catalog, setupI18n } from '@lingui/core'
import { I18nProvider } from '@lingui/react'
import { observable } from 'mobx'
import { Observer } from 'mobx-react'
import React from 'react'

export const i18n = setupI18n()

const currentLanguage = observable.box('') // setting default language here won't work, it's too soon

export const I18nManager: React.SFC = ({ children }) => (
  <Observer>
    {() => (
      <I18nProvider language={currentLanguage.get()} i18n={i18n}>
        {children}
      </I18nProvider>
    )}
  </Observer>
)

export async function changeLanguage(lang: string) {
  await loadCatalog(lang)
  i18n.activate(lang)
  currentLanguage.set(lang)
}

export async function loadCatalog(lang: string) {
  let catalog: Catalog
  if (process.env.NODE_ENV !== 'production') {
    catalog = await import(
      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
      `@lingui/loader!./locale/${lang}/messages.json`
    )
  } else {
    catalog = await import(
      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
      `./locale/${lang}/messages.ts`
    )
  }
  i18n.load({ [lang]: catalog })
}

Now you can use import { i18n } from 'fileabove.tsx' anywhere in your app. No need to use withi18n anymore 🎉 When you want to change the language, just call changeLanguage. Similar functionality could be done if you are loading & merging catalogs based on code splitting. Then you also need to re-render whole app.

This whole solution is obviously against some ground rules of not using global stuff, but honestly, I don’t think it matters in this case. Only, hurdle might be with unit testing where the state (i18n) would be shared, but as long as you don’t want to test localization, it should be fine 😃

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.