Instance of setupI18n not translating messages with variables

[divyansh7924]

Describe the bug Using an instance of setupI18n seems to be not translating messages with variables, the global i18n instance from @lingui/core however translates it properly

To Reproduce Steps to reproduce the behavior, possibly with minimal code sample, e.g:

import { setupI18n } from '@lingui/core';
import { zh } from 'make-plural/plurals';

const i18n = setupI18n({
  locale: 'zh-Hans',
  localeData: { 'zh-Hans': { plurals: zh } },
  messages: { 'zh-Hans': require(`../../locales/zh-Hans/messages`) },
});


const productName = 'Air Max 97 TCO';
console.log(i18n._(t`👀 More People Want This Now`));
console.log(i18n._(t`Someone new is offering for ${productName}! Make Offer now!`));

Outputs

👀你关注的商品很抢手
Someone new is offering for Air Max 97 TCO! Make Offer now!

Expected behavior A clear and concise description of what you expected to happen.

👀你关注的商品很抢手
很多人出价抢买 Air Max 97 TCO，快跟进报价！

Additional context Add any other context about the problem here.

• jsLingui version ^3.14.0
• Babel version ^7.11.1
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.)

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true
        }
      }
    ],
    ["@babel/preset-flow", { "allowDeclareFields": true }]
  ],
  "plugins": [
    "macros",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-syntax-dynamic-import",
    ["module-resolver", { "root": ["./src"] }]
  ]
}

• .linguirc

{
  "catalogs": [
    {
      "path": "locales/{locale}/messages",
      "include": [
        "src"
      ],
      "exclude": [
        "**/node_modules/**"
      ]
    }
  ],
  "formatOptions": {
    "origins": true,
    "lineNumbers": false
  },
  "compileNamespace": "cjs",
  "extractBabelOptions": {},
  "fallbackLocales": {
    "default": "en"
  },
  "format": "po",
  "locales": [
    "en",
    "id",
    "my",
    "zh-Hans",
    "zh-Hant-TW",
    "ja"
  ],
  "orderBy": "messageId",
  "pseudoLocale": "",
  "rootDir": ".",
  "runtimeConfigModule": [
    "@lingui/core",
    "i18n"
  ],
  "sourceLocale": "en"
}

[mkurayan]

Hi, I just fixed the similar problem in my app, it turned out that I forgot to run Lingui extract so translation was missed. In such a case, Lingui will work locally but will not translate in production.

Make sure that:

• Run the extract command
• Message exists in locales files and translated
• Compile translation
• Make sure that compiled translation loaded

[divyansh7924]

@mkurayan Our issue is not related to the extract command. We have already extracted the translations

[divyansh7924]

Tried debugging the issue after cloning the original repo. this._locale comes undefined which is being passed to the interpolate function for translations containing variables

[divyansh7924]

Hey @semoal , would really appreciate if you can help us around here We are not able to get a workaround on this issue

Thanks!

[divyansh7924]

@semoal any news? this fix also doesn't seem to work https://github.com/lingui/js-lingui/issues/1181

[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.

[divyansh7924]

Is this library dead now? I see no help on the issue since months

[divyansh7924]

Test failing example https://github.com/divyansh7924/js-lingui/commit/f92b0f01edc8f3fe56dc9c2167ac5dbe92388b79

[divyansh7924]

For anyone coming across this issue, downgrading to version 2.9.1 resolves the issue.

[timofei-iatsenko]

@divyansh7924 You probably misusing a library. If you want to use macros (which t`` is) with custom instance of i18n it should be like that:

const productName = 'Air Max 97 TCO';

console.log(t(i18n)`👀 More People Want This Now`);
console.log(t(i18n)`Someone new is offering for ${productName}! Make Offer now!`);

Otherwise you are passing into i18n._ function new string every time when productName changed and it obviously not matched against strings in catalog. t is a "magic" function, during build time it replaces your actual code to something like that:

console.log(t(i18n)`Someone new is offering for ${productName}! Make Offer now!`);

// ↓ ↓ ↓ ↓ ↓ ↓
console.log(i18n._('Someone new is offering for {productName}! Make Offer now!', {productName}));

Note how {productName} variable in template literal was changed to just a string.

Please refer to the documetation for more use cases and examples: https://lingui.js.org/ref/macro.html

[divyansh7924]

Thanks for the suggestion @thekip, I will try this out For a little context, the reason we are trying to use the custom i18n instance is because of the issue here https://github.com/lingui/js-lingui/issues/1181

[Martin005]

@divyansh7924 Could you please confirm whether @thekip's suggestion helped to solve your issue? 🙂