lingui / lingui/js-lingui

[v6] Inconsistent behaviour of dynamic IDs in JS/JSX macros

Open
#2,523 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
5.9k
Forks
457
Avg merge
1d 23h
Merged PRs (30d)
16

Description

### Description

While working on #2514 I became aware of a potential bug/discrepancy in how Lingui processes dynamic IDs between JS Macros and JSX Macros:

1. **JS Macros (`t({ id: dynId, message: "Welcome" })`)**:
Preserves the dynamic AST node `dynId` in the output because Babel processes object properties directly. The output retains `"id": dynId`.
2. **JSX Macros (`Hello`)**:
The dynamic attribute is lost. `maybeNodeValue()` inside `macroJsx.ts` evaluates non-static JSX attributes to `null`. It strips the attribute, completely drops `dynId`, and instead relies on the hash fallback identifier from the text.

I'm not sure what the expected behaviour is but figured I'd surface this in case it's a bug.

### Example test snapshot

```tsx
import { Trans } from "@lingui/react/macro";
const dynId = "dynamic";
Hello;

↓ ↓ ↓ ↓ ↓ ↓

import { Trans as _Trans } from "@lingui/react";
const dynId = "dynamic";
<_Trans
{
/*i18n*/
...{
id: "uzTaYi",
message: "Hello",
}
}
/>;
```

### Verifications

- [x] I've checked [the docs](https://lingui.dev) and this isn't covered there.
- [x] I've searched existing issues on [GitHub](https://github.com/lingui/js-lingui/issues).

### Macro Support

Babel with babel-macro-plugin

### Lingui Version

6.0.0-next.3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Read macroJsx.ts, starting with maybeNodeValue(), and compare the JSX macro behavior with the JS macro behavior described in the issue. Use the supplied JSX snapshot as the regression case; done means the expected handling of dynamic IDs is decided and both macro paths behave consistently.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript
Domain
frontend, localization, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.