# Webpack-compatible loader

The `@lingui/loader` is a Webpack-compatible loader for Lingui message catalogs. It can be used with Webpack, Rspack, and Rsbuild. It offers an alternative to the [`lingui compile`](https://lingui.dev/ref/cli.md#compile) and compiles catalogs on the fly.

It enables you to `import` `.po` files directly, instead of running `lingui compile` and `import`ing the resulting JavaScript (or TypeScript) files.

## Installation[​](#installation "Direct link to Installation")

Install `@lingui/loader` as a development dependency:

* npm
* Yarn
* pnpm

```
npm install --save-dev @lingui/loader
```

```
yarn add --dev @lingui/loader
```

```
pnpm add --save-dev @lingui/loader
```

## Usage[​](#usage "Direct link to Usage")

The recommended setup is to configure the loader in your bundler config and import catalogs without the inline loader syntax.

```
module: {

  rules: [

    {

      test: /\.po$/,

      use: [

        {

          loader: "@lingui/loader",

          options: {

            failOnCompileError: true,

          },

        },

      ],

    },

    ...otherRules

  ],

}
```

Here's an example of dynamic import:

```
export async function dynamicActivate(locale: string) {

  const { messages } = await import(`../locales/${locale}/messages.po`);

  i18n.loadAndActivate({

    locale,

    messages,

  });

}
```

You can also prepend `@lingui/loader!` in front of the catalog path if you prefer inline loader syntax:

```
export async function dynamicActivate(locale: string) {

  const { messages } = await import(`@lingui/loader!./locales/${locale}/messages.po`);

  i18n.loadAndActivate({

    locale,

    messages,

  });

}
```

Remember that the file extension is mandatory.

## Options[​](#options "Direct link to Options")

### `failOnMissing`[​](#failonmissing "Direct link to failonmissing")

Fail the build when missing translations are detected.

* `true` or `"resolved"`: fail only if a translation is still missing after `fallbackLocales` are applied.
* `"catalog"`: fail if the target locale catalog itself has missing translations before `fallbackLocales` are applied.
* `false` or omitted: do not fail the build on missing translations.

### `failOnCompileError`[​](#failoncompileerror "Direct link to failoncompileerror")

Fail the build when message compilation produces errors.

note

Catalogs with the `.json` extension are treated differently by Webpack-compatible bundlers. They load as ES module with default export, so your import should look like this:

```
const { messages } = (await import(`@lingui/loader!./locales/${locale}/messages.json`)).default;
```

## See Also[​](#see-also "Direct link to See Also")

* [Dynamic Loading of Message Catalogs](https://lingui.dev/guides/dynamic-loading-catalogs.md)
* [Catalog Formats](https://lingui.dev/ref/catalog-formats.md)