Missing auto-generated `id` for `<Trans>` macro when using Typescript about js-lingui HOT 4 CLOSED

It's because you have typescript plugin before babel plugin. The lingui macro is looking for Trans JSX nodes in the AST, however after typescript plugin they are already transpiled to js and could not be matched and picked up by macro.

There are few possible solutiuons:

• drop typescript and use only babel (for typescript transpiling as well)
• If dropping typescript is not possible (for example because of using legacy decorators + emitDecoratorMetdata?) you can set "jsx": "preserve", in tsconfig.json so JSX statements would be passed as-is to the babel.
• Consider moving to SWC which is not only faster, but also supports emitDecoratorMetdata and could be used as drop-in replacement for tsc

from js-lingui.

Thanks for the quick reply!

I see this makes sense. Indeed using "jsx": "preserve" and adding the @babel/preset-react" preset made it work.

Should there be anything in the doc about this? There is a Typescript section but it reads:

You should not need to do anything to get type support working.

from js-lingui.

You should not need to do anything to get type support working.

type support

For macro support docs says that you need either babel or SWC compiler. And this is quite unusual to have typescript and babel together in 2024, since babel can transpile the typescript code since long ago, and typescript could be used separately only to check types (not for transpiling)

from js-lingui.

Here is where I was coming from, in case it makes the use-case clearer.

My starting point was a pure Typescript project (no Babel or SWC whatsoever). What I'm doing is closer to a react component library than to a website, and I'm happy without any transpilation. I then simply followed the React project instructions to install lingui.

Thanks again for the help!

from js-lingui.