Interpolation for dynamically loaded translations?

[jkelin]

Hi! We have translations stored in an external system (custom made) and we are dynamically fetching/loading them on page load. This works great in development, however when deployed with process.env.NODE_ENV="production" our translations show original, instead of interpolated, template.

For example for the following template: Hello {name}
Development: Hello jkelin
Production Hello {jkelin}

This is probably because the template is not compiled at runtime when built for production as per #491.

Is there any way I could make dynamic translations work without the macro/cli compilation step?

[timofei-iatsenko]

Yes, catalogs should be compiled before they can be used in runtime. Otherwise, ICU expression will not work (ICU parser is dropped in production build).

To compile them, you can use compileMessage from "@lingui/message-utils/compileMessage" package.

Simple example:

import {
  compileMessage,
  CompiledMessage,
} from "@lingui/message-utils/compileMessage"

const compiledMessages = Object.keys(messages).reduce<{
  [msgId: string]: CompiledMessage
}>((obj, key: string) => {
  obj[key] = compileMessage(messages[key])
  return obj
}, {})

You can use lambda / cloud function to compile catalogs on request. Or precompile them and store in S3 or similar storage.

[jkelin]

Awesome, thanks. This has fixed our problem.