Some translated texts using the t(like txxx) method did not take effect when switching languages.

[zengkaiwen]

Describe the bug

When upgrading the project from lingui v3.15.0 to v4.4.2, the translated text declared using the t method inside the page components does not take effect when switching languages.

To Reproduce

A demo has been created to reproduce the issue: Demo. Please refer to the code file Page1.tsx for the relevant code.

const memoLoading = React.useMemo(() => {
    if (loading) {
        return <div className="loading"><span>{t`Loading...`}</span></div>
    }
    return null;
}, [loading]);
…
const memoEmpty = React.useMemo(() => {
    if (!loading && dataList.length === 0) {
        return <div className="empty"><span>{t`No Data`}</span></div>
    }
    return null
}, [dataList, loading])
…
<button onClick={handleLoad}>{t`Load Data`}</button>

The translations enclosed in {t`xxx`} do not take effect. However, this syntax is supported in lingui v3.15.0.

Expected behavior

The t method should correctly switch the language for the translated text in the new version.

Additional context

• jsLingui version 4.4.2
• Babel version @babel/core@7.22.11
• Macro support:
• I'm using SWC with @lingui/swc-plugin
• I'm using Babel with babel-macro-plugin
• I'm not using macro
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, NextJs, Vite)
  Vite

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { lingui } from '@lingui/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["macros"],
        presets: ["@babel/preset-typescript"]
      }
    }),
    lingui(),
  ],
})

[timofei-iatsenko]

https://lingui.dev/tutorials/react-patterns#memoization-pitfall

[zengkaiwen]

Thank you for your reply, but my main pain point here is:

Upgrading from v3.15.0 to v4.4.2, there are many business pages and components, and each component needs to add useLingui or change to Trans. The workload is large and it is a major disruptive change.

I would like to know if there is a better way to upgrade.

[timofei-iatsenko]

There was a change in a I18nProvider #1501 following discussion from there could help with migration.

In short - you can copy a version of i18nProvider from v3 and use it in your application if you need to force remount children when switching languages.

[timofei-iatsenko]

Here is the migration paragrpagh about that https://lingui.dev/releases/migration-4#i18nprovider-no-longer-remounts-its-children-on-locale-change

[maiderhernandorenatoqio]

Can I open this discussion again?

Even if we use v3 i18nProvider, according to the discussion you are mentioning (#1501) , we have to add useLingui hook on every place we are using t method... That's a lot of places we have to do the change...

@zengkaiwen did you find any solution yourself? 🙏

[timofei-iatsenko]

@maiderhernandorenatoqio https://lingui.dev/releases/migration-4#i18nprovider-no-longer-remounts-its-children-on-locale-change

Additionally, you can keep using the v3 implementation by copying it into your code base and using that instead.

[timofei-iatsenko]

One general tip, don't switch languages in runtime. Just reload whole page, this is one time event for your users but resolve tons of issues related to i18n in the app and save dozens of developers hours. This is not exactly related to lingui or any other i18n library. It's just a common sense. To switch in runtime you should keep track on all your loaded data and state to reload it with the actual locale.