Unable to get lingui to work with vite/react-swc

[Destreyf]

I am working on a project but I am unable to get the application to run/build when enabling lingui.

[plugin:vite-plugin-lingui] Requested resource src/i18n/locale/en/messages.po is not matched to any of your catalogs paths specified in "lingui.config".

Resource: /Users/destreyf/projects/<project_name>/src/i18n/locale/en/messages.po

Your catalogs:
/Users/destreyf/projects/<project_name>/src/i18n/locale/{locale}/messages.po
Please check that catalogs.path is filled properly.
/Users/destreyf/projects/<project_name>/src/i18n/locale/en/messages.po

The file definitely exists:

destreyf@Chriss-MacBook-Pro project_name % stat /Users/destreyf/projects/<project_name>/src/i18n/locale/en/messages.po
16777230 46531431 -rw-r--r-- 1 destreyf staff 0 4488 "Apr 14 15:57:34 2025" "Apr 14 15:57:33 2025" "Apr 14 15:57:33 2025" "Apr 14 15:57:33 2025" 4096 16 0 /Users/destreyf/projects/<project_name>/src/i18n/locale/en/messages.po

My config file looks like this:

import { defineConfig } from "@lingui/cli";
import { formatter } from "@lingui/format-po";
import { locales } from "./src/i18n/lib/lingui.locales";

export default defineConfig({
  sourceLocale: "en",
  pseudoLocale: "pseudo",
  locales: locales as unknown as string[], // suppresses type error
  fallbackLocales: {
    "en-US": ["en-GB", "en"],
    "es-MX": "es",
    "zh-CN": ["zh", "en"],
    "zh-HK": ["zh", "en"],
    pseudo: "en",
    default: "en",
  },
  catalogs: [
    {
      path: "<rootDir>/src/i18n/locale/{locale}/messages.po",
      include: ["<rootDir>/src"],
      exclude: ["**/node_modules/**"],
    },
  ],
  format: formatter({ lineNumbers: false }),
});

Here's my vite.config.js file

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";
import svgr from "vite-plugin-svgr";
import { lingui } from "@lingui/vite-plugin";

import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import { resolve } from "node:path";

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    TanStackRouterVite({ autoCodeSplitting: mode === "production" }), // Eventually switch to true once delay issue is resolved
    svgr({
      svgrOptions: {
        plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
        svgoConfig: {
          multipass: true,
          floatPrecision: 3,
        },
      },
    }),
    react({
      plugins: [["@lingui/swc-plugin", {}]],
    }),
    lingui(),
    tailwindcss(),
  ],
  test: {
    globals: true,
    environment: "jsdom",
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  build: {
    terserOptions: {
      format: {
        comments: false,
      },
    },
  },
  esbuild: {
    legalComments: "none",
    drop: ["console", "debugger"],
    minify: {},
  },
}));

Here's the directory structure:

tree -I 'node_modules|dist|supabase|public|.*'
.
├── README.md
├── index.html
├── lingui.config.ts
├── package-lock.json
├── package.json
├── src
│   ├── components/
│   ├── env.ts
│   ├── hooks/
│   ├── i18n
│   │   ├── lib
│   │   │   ├── lingui-client-provider.tsx
│   │   │   ├── lingui.locales.ts
│   │   │   └── setup.ts
│   │   └── locale
│   │       ├── en
│   │       │   └── messages.po
│   │       ├── es
│   │       │   └── messages.po
│   │       ├── fr
│   │       │   └── messages.po
│   │       ├── jp
│   │       │   └── messages.po
│   │       ├── pseudo
│   │       │   └── messages.po
│   │       └── zh
│   │           └── messages.po
│   ├── logo.svg
│   ├── main.tsx
│   ├── reportWebVitals.ts
│   ├── routeTree.gen.ts
│   ├── routes/
│   └── styles.css
├── tsconfig.json
├── vite-env.d.ts
├── vite.config.js
└── wrangler.jsonc

Relevant package.json entries

{
  "name": "platform",
  "private": true,
  "type": "module",
  "scripts": {
    "start": "vite --port 3000",
    "build": "vite build && tsc",
    "serve": "vite preview",
    "test": "vitest run"
  },
  "dependencies": {
    "@lingui/core": "^5.3.1",
    "@lingui/loader": "^5.3.1",
    "@lingui/react": "^5.3.1",
  },
  "devDependencies": {
    "@lingui/cli": "^5.3.1",
    "@lingui/format-po": "^5.3.1",
    "@lingui/swc-plugin": "^5.5.2",
    "@lingui/vite-plugin": "^5.3.1",
    "@svgr/plugin-jsx": "^8.1.0",
    "@svgr/plugin-svgo": "^8.1.0",
    "@vitejs/plugin-react": "^4.3.4",
    "@vitejs/plugin-react-swc": "^3.9.0",
    "typescript": "^5.7.2",
    "vite": "^6.1.0",
    "vite-plugin-svgr": "^4.3.0",
    "vitest": "^3.0.5"
  },
  "overrides": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  }
}

I had this working just fine inside of a nextjs project, but we don't need SSR for our use case so we're moving away from that for now and I just can't seem to get past this initial configuration.

[timofei-iatsenko]

What's inside import { locales } from "./src/i18n/lib/lingui.locales"; ?

[Destreyf]

It's simply an array of locales supported.

I won't be at my computer until the morning (America/Denver tz), but, it is something along the lines of the following

export const locales = ['en','es','fr','zh','psuedo'] as const;

[timofei-iatsenko]

Double check that the en is here.

[Destreyf]

I know that the value is present, because I use this as part of my routing validation, only valid values excluding pseudo are allowed.

[timofei-iatsenko]

Unfortunately, i'm lacking of ideas and could not help without a reproduction. The issue is not related to vite/react-swc, it's related to the configuration of paths. The @lingui/vite-plugin plugin is responsible for this.

You can try to debug this plugin by your own to find what's wrong in your setup. Basically what this plugin is doing is loading all catalogs as lingui compile would do, and then trying to find a requested resource (whatever your wrote in your code import("/Users/destreyf/projects/<project_name>/src/i18n/locale/en/messages.po")) in the compilation result.

If it wasn't able to find catalog, it will throw such error. So you need to go step by step with a debugger and check all paths in the plugin.

[Destreyf]

I ran npx lingui compile and I get an instant "Done!" doing npx lingui extract yields zero messages, even if I delete stuff so something is definitely misconfigured.

I will dig into this further, I am just confused because this (nearly identical) configuration was working fine inside of nextjs.

The only thing that changed was my catalog path changed from <rootDir>/packages/i18n/locale/{locale}/messages to <rootDir>/src/i18n/locale/{locale}/messages (I did add .po as a test but it didn't change anything), and my include changed from <rootDir>/apps/web to <rootDir>/src as I am not doing a monorepo anymore.

Also just to confirm, here's a copy/paste of my lingui.locales.ts

export const locales = ['en', 'es', 'fr', 'jp', 'zh', 'pseudo'] as const;

[Destreyf]

Quick Update!

I changed ny include paths to

{
  include: ['<rootDir>/src/routes/**/*.{ts,tsx}', '<rootDir>/src/components/**/*.{ts,tsx}']
}

and it's working now, however if it set it back to just <rootDir>/src or src it does not.

[timofei-iatsenko]

Well yes, i don't remember exactly how this works, because I touched this code long time ago. But i suppose catalog will not be created if there are 0 matched source files.

<rootDir>/src is incorrect path, you need to write glob which will match files, likes this: <rootDir>/src/**, or like you did.