js-lingui
js-lingui copied to clipboard
children's types is not preserved when `<Trans>` is used
Describe the bug
<Trans>
replaces the inner JSX it gets as children
with a transformed JSX tree. The problem is that some elements expect children
to be of type ReactElement
(i.e. a single JSX node), but it replaces the original children with an array of ReactElement
.
To Reproduce Steps to reproduce the behavior, possibly with minimal code sample, e.g:
import { Trans } from "@lingui/react";
export default function App() {
return (
<Trans>
An error has occurred, please{" "}
<AnchorLink asChild>
<Link to={"/login"}>
sign in again
</Link>
</AnchorLink>
.
</Trans>
);
}
Expected behavior The following HTML to be produced:
<some-parent-node>
An error has occurred, please <a href="/login">sign in again</a>.
</some-parent-node>
The actual behavior is this HTML is produced:
<some-parent-node>
An error has occurred, please .
</some-parent-node>
Additional context
The underlying issue is that asChild
composition relies on a single element child to be provided in children
. However, formatElement
returns an array of items, always, even when tree.length === 1
.
- jsLingui version
lingui --version
: 4.7.1 (but also happens with4.11.3
- Babel version
npm list @babel/core
: 7.24.7. - Macro support:
- [ ] I'm using SWC with
@lingui/swc-plugin
- [x] I'm using Babel with
babel-macro-plugin
- [ ] I'm not using macro
- Your Babel config (e.g.
.babelrc
) or framework you use (Create React App, NextJs, Vite)