js-lingui icon indicating copy to clipboard operation
js-lingui copied to clipboard

children's types is not preserved when `<Trans>` is used

Open bengry opened this issue 5 months ago • 0 comments

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 with 4.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)

bengry avatar Aug 27 '24 11:08 bengry