← ClaudeAtlas

migrate-i18next-to-linguilisted

Migrate i18next/react-i18next projects to Lingui. Use when the user wants to replace i18next, react-i18next, useTranslation, i18n.t(), Trans i18nKey, or i18next JSON catalogs with Lingui equivalents. Covers package installation, config setup, code transformation patterns, plural migration, namespace handling, and catalog conversion.
lingui/skills · ★ 9 · Web & Frontend · score 79
Install: claude install-skill lingui/skills
# Migrate i18next to Lingui ## Migration Checklist ``` - [ ] Step 1: Install Lingui packages - [ ] Step 2: Create lingui.config.js - [ ] Step 3: Set up build tooling (Babel/SWC/Vite) - [ ] Step 4: Replace i18n initialization - [ ] Step 5: Migrate React components (useTranslation → useLingui, Trans → Trans) - [ ] Step 6: Migrate JS/TS strings (t() → t``) - [ ] Step 7: Migrate plurals - [ ] Step 8: Migrate namespaces - [ ] Step 9: Convert existing translation catalogs - [ ] Step 10: Run lingui extract && lingui compile - [ ] Step 11: Remove i18next packages ``` ## Step 1: Install Lingui > **Node version gate**: Lingui 6 is ESM-only and requires Node.js ≥ 22.19 (or ≥ 24). On older Node, pin all `@lingui/*` packages to `^5`. ```bash # Core (always required) npm install @lingui/core @lingui/react # CLI (dev) npm install --save-dev @lingui/cli # Macro support - pick one based on build tool: # Babel npm install --save-dev @lingui/babel-plugin-lingui-macro # SWC npm install --save-dev @lingui/swc-plugin # Vite (also install the Babel macro plugin above — see Step 3) npm install --save-dev @lingui/vite-plugin ``` ## Step 2: Create `lingui.config.js` ```js import { defineConfig } from "@lingui/cli"; export default defineConfig({ sourceLocale: "en", locales: ["en", "de", "fr"], // match your existing locales catalogs: [ { path: "<rootDir>/src/locales/{locale}/messages", include: ["src"], }, ], }); ``` ## Step 3: Configure Build Tooling **Vite** (`