Skip to content

README.md

Latest commit

 

History

History
31 lines (19 loc) · 2.08 KB

README.md

File metadata and controls

31 lines (19 loc) · 2.08 KB

Lingui + RSpack Example

This project shows how to use the Rspack JavaScript bundler with Lingui JS to provide i18n for a React application (TypeScript).

lingui-rspack-i18n-demo

Setup Instructions

  1. npm install to install dependencies
  2. npm run dev to run the development server.
  3. npm run build to build the application.

Update I18n

  1. Wrap any messages requiring translation in <Trans> or a related macro.
  2. npm run extract to generate message catalogs in src/locales/{locale}/messages.
  3. Translate any new messages in the catalogs.
  4. Restart the dev server or rebuild the app. @lingui/loader compiles .po catalogs during bundling, so no separate lingui compile step is required.

Configuration File Notes

  • rspack.config.js configures both the builtin:swc-loader and @lingui/loader. The SWC plugin transpiles Lingui Macros like <Trans> into their React runtime equivalents, while @lingui/loader turns imported .po catalogs into runtime messages at build time. When using Lingui SWC plugin, ensure version compatibility with @rspack/core. Refer to the compatibility guide for selecting the appropriate plugin version.

  • src/i18n.ts lazy-loads locale catalogs from src/locales/{locale}/messages.po, which lets rspack split translations into separate chunks and compile them through @lingui/loader.

  • lingui.config.ts specifies the available locales, defaults, and paths where the message catalogs are stored.

Helpful Resources