JS Macros not displaying after switch to Vite from CRA

[cgalpin]

I have a Create React App that I am converting to Vite, which worked perfectly before the switch using npx nx@latest init. After switching the project to Vite I noticed only the ids for JS macros (like t) display when deployed, and only then noticed that in dev the translations for the JS macros are not displaying either when I change languages.

The problems I am experiencing are similar to discussion /discussions/1518 but made a different discussion since there are differences, and I am still stuck.

I have tried both using @vitejs/plugin-react/babel and @vitejs/plugin-react-swc per https://lingui.dev/tutorials/setup-vite but neither way works. I am of course running extract and compile, and all worked before the switch.

Before, with the CRA app, I did not use any extension on the import, but this is not allowed with Vite

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

My dynamicActivate now looks like this:

async function dynamicActivate(locale: string) {
    const { messages } = await import(`../locales/${locale}/messages.po`);
    i18n.load(locale, messages);
    i18n.activate(locale);
}

My lingui.config.ts is

import type { LinguiConfig } from "@lingui/conf"

const config: LinguiConfig = {
    locales: ["en", "es", "fr", "de", "cs", "ko", "pl", "zh", "lv",
              "pt", "da", "hr", "lt", "sk", "is", "hu", "sl", "et", "it", "nl",
              "fi", "el", "ja", "no", "sv"],
    sourceLocale: "en",
    catalogs: [{
       path: "src/locales/{locale}/messages",
       include: ["src"],
       exclude: ["**/__tests__/**","src/locales/**/*.js"]
    }],
    format: "po",
}

export default config

---

For the @vitejs/plugin-react method

vite.config.ts:

import react from '@vitejs/plugin-react';
import { lingui } from "@lingui/vite-plugin";
..
export default defineConfig({
plugins: [
    react({
      babel: {
        plugins: ["macros"],
      },
    }),
    lingui(), 
],
})

Even though it says it isn't used I also tried
.babelrc:

{
    "plugins": [
      ["macros"],
    ]
}

I also tried this in vite.config.ts:

export default defineConfig({
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
})

---

For the @vitejs/plugin-react-swc method

vite.config.ts:

import react from '@vitejs/plugin-react-swc';
import { lingui } from "@lingui/vite-plugin";
..
export default defineConfig({
plugins: [
    react({
      plugins: [["@lingui/swc-plugin", {}]]
    }),
    lingui(), 
],
})

.swcrc:

{
  "$schema": "https://json.schemastore.org/swcrc",
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@lingui/swc-plugin",
          {
          },
        ],
      ],
    },
  },
}

Do you see any problems, or have any advice how to track this problem down?

tia,
charles

[cgalpin]

Are there any examples of a working vite+react+typescript+lingui app using @lingui/vite-plugin anywhere? I can't find one.

I made a simple/stripped down example using a clean vite based react project and the instructions from https://lingui.dev/tutorials/setup-vite and https://lingui.dev/tutorials/setup-react and it only partially works.

It does not work using @vitejs/plugin-react - the translations do not display when switching languages, either for the JS (t) macros or JSX (<Trans>) macros.

Using @vitejs/plugin-react-swc there is a problem with the t macro which I don't fully understand. When I change the language from English to Spanish, the first time, the t macro translations do not change. When I change back to English they then switch to the Spanish Translations, and from that point on as I toggle back and forth they stay out of sync displaying the Spanish translation for English and the English for Spanish. This is likely something I am doing wrong, but I don't know what, and this simple test works fine in an older CRA version of my app.

Would anyone be kind enough to take a look at this project and see if they can tell why this is happening, as well as perhaps why the @vitejs/plugin-react way doesn't work?

https://github.com/cgalpin/test-vite-lingui

thanks,
charles

[timofei-iatsenko]

Working vite-project-react-babel example

Regarding t

const Numbers = () => {
  const numbers = [
    t`one`,
    t`two`,
    t`three`
  ]

  return (
    <ol>
      { numbers.map(number => <li key={number}>{number}</li>) }
    </ol>
  )
}

Whenever you use t macro in react application, you should "subscribe" your component to changes using useLingui() hook:

+ import { useLingui } from "@lingui/react";

const Numbers = () => {
+  useLingui()

  const numbers = [
    t`one`,
    t`two`,
    t`three`
  ]

  return (
    <ol>
      { numbers.map(number => <li key={number}>{number}</li>) }
    </ol>
  )
}

[cgalpin]

Thanks a lot, that solves my simple example problems!

I am still having some problems in my real app which has some more complicated global state/config using the t macro. At this point I think i have had them all along, but just never did any testing with other languages and the t macro. I will keep at it though.

Thanks again for all the help. I really do love lingui!