Webpack loader for message catalogs

My goal is to load my messages without manually compiling (lingui compile) them during development. I don’t have a problem manually compiling them for a production build but having to do it manually after every change to the files is cumbersome.

I used create-react-app and ejected it to be able to add the lingui-react babel preset, which means I’m using webpack. I couldn’t find a webpack loader to watch and compile the catalogs.

I’m also a little confused about the lingui-i18n/dev package. I assumed I could use it to load my messages.json files and create catalogs from it on the fly, but from the tutorial it seems that I have to load the compiled .js catalogs anyway.

Is there an easy way to achieve what I want?

[tricoder42]

Hey @pybuche, if you use @lingui/loader, you don’t have to run lingui compile manually. Loader actually creates production ready compiled catalogs.

These two import statements are identical:

// importing source catalog through loader
import fr from '@lingui/loader!conf/locale/fr/messages.json'
// importing compiled catalog
import fr from 'conf/locale/fr/messages.js'

[tricoder42]

Just release lingui-loader@0.1.0. This is first release, please consider it experimental. I tried it with webpack example and it works fine. I’m releasing it early to get feedback as soon as possible.

Quickstart

1. Install it

npm install --dev lingui-loader

1. Load JSON message catalog using this loader:

import catalog from 'lingui-loader!locale/en/messages.json'

// catalog must be unpacked before passing to I18nProvider
<I18nProvider catalog={{ en: unpackCatalog(catalog) }} language="en">
...
</I18nProvider>

or using dynamic import

import { unpackCatalog } from 'lingui-i18n'
const catalogs = await import(
      /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
      `lingui-loader!../locale/${language}/messages.json`).then(unpackCatalog)

See webpack example.

I’ll add more docs tomorrow.