Interpolated values not shown in production

[fagerbua]

Describe the bug
Interpolation of values in translated strings doesn't work in production. During development it works perfectly fine, but in production my app shows texts like 'Log out: {username}`. There are no crashes or error messages.

To Reproduce
The behavior occurs whenever I build the project with NODE_ENV=production. I can try to make a minimal reproduction if necessary, just wondering if you have any ideas what might be causing this before I do so.

Expected behavior
This should work in production as it does during development.

Additional context
I've experimented with different ways of providing the i18n object (withI18n, I18n), and also tried using macros, but that makes no difference.

The problem disappears if I manually modify node_modules/@lingui/core/index.js to always require ./cjs/core.development.js.

• jsLingui version 2.7.0
• Babel version babel-core@7.0.0-bridge.0
• .babelrc:

{
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-transform-regenerator",
    "@babel/plugin-proposal-class-properties",
    "dynamic-import-webpack"
  ],
  "presets": [
    ["@babel/env", {
      "targets": {
        "browsers": ["last 2 versions", "IE >= 9"]
      },
      "useBuiltIns": "entry"
    }],
    "@babel/preset-react",
    "@babel/preset-flow",
    "@lingui/babel-preset-react",
  ],
  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-regenerator"
      ],
      "presets": [
        ["@babel/env", {
           "targets": {
             "node": "current"
           }
         }],
        "@babel/preset-react",
        "@babel/preset-flow"
      ]
    }
  }
}

[tricoder42]

Hey @fagerbua, do you load compiled message catalogs to your app? You can compile them either manually and then import .js files or use @lingui/loader webpack loader.

[fagerbua]

Thanks for putting me on the right track! Your comment lead me to do the obvious thing: to check if strings are translated at all when I use a non-default language. Turns out they are not, so it's likely an issue with the catalog loading.

You've likely considered it already, but I wonder if it's possible to have some sort of warning when this happens unintentionally? As long as you stick to the default language, it's not obvious.

[tricoder42]

@fagerbua Definitely good point. I created a tracking issue, where I would like to list similar improvements #387

[ppozniak]

@fagerbua know it's a pretty old issue, but I'm facing the same issue right now. Do you remember what exactly was the cause in your scenario?

I'm having this only production mode. It's with the default language, but I'm importing even the default messages.js. Running out of ideas 😢

Imported object with catalogs seems to look fine - it's a function that takes one parameter, and looks like it should be replaced but still seeing the {variableName}. I have it in <Trans> component.

I just discovered that this happens only for my default language, which is english. When I try with other one it works fine, even for the same string.

[ppozniak]

I think I found a solution:

export const i18n = setupI18n({ catalogs, language: 'en' });

I didn't pass catalogs to setupI18n, nor set the language. This helped.

<I18nProvider
            i18n={i18n}
            language={sessionConfig.locale || DEFAULT_LOCALE}
            catalogs={catalogs}
          >

Leaving just in case anyone has the same problem.

[aohua]

I think I found a solution:

export const i18n = setupI18n({ catalogs, language: 'en' });

I didn't pass catalogs to setupI18n, nor set the language. This helped.

<I18nProvider
            i18n={i18n}
            language={sessionConfig.locale || DEFAULT_LOCALE}
            catalogs={catalogs}
          >

Leaving just in case anyone has the same problem.

I'm having the same problem, this solution doesn't work for me. Could you post your .linguirc file as well? Thank you.

[ppozniak]

@aohua
It kind of fixed my issue, but I also had to do additional thing.
On thing that could help from .linguirc is

  "sourceLocale": "en",
   "fallbackLocale": "en"

So for me it started to work when language was set to existing language (the one that you have files for), but if you set current language to not existing one, the interpolation failed.

So what I did is:

export function setLocaleWithFallback(locale) {
  if (locale && catalogs[locale]) {
    return locale;
  }

  return DEFAULT_LOCALE;
}

<I18nProvider
            i18n={i18n}
            language={setLocaleWithFallback(sessionConfig.locale)}
            catalogs={catalogs}
          >

Where catalogs is just an object

import enCatalog from './translations/en/messages.po';

// Import additional languages here
export default {
  en: enCatalog,
};

Hope that helps you.
Also I created a new issue here: #491