[V3] Trans is eating up parent component

Describe the bug I think that screenshots will explain my issue better…

this

renders to

but

this renders to

So, it’s, somehow, eating the anchor element, wtf?

I am using the Trans from @lingui/macro.

Expected behavior It shouldn’t eat parent components

Additional context It’s a nextjs app with TS4 and node 14

• jsLingui version 3.0.20
• Babel version 7.7.7
• .babelrc

{
  "env": {
    "production": {
      "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
      "plugins": ["emotion", "macros"]
    },
    "development": {
      "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
      "plugins": [["emotion", { "sourceMap": true }], "macros"]
    }
  }
}

[tricoder42]

No, it’s Link from nextjs.

Not sure what version you use, but Next.js recommends to always use <a> as a child of <Link>. In fact, there several props to handle cases when child component renders <a> on it’s own: https://nextjs.org/docs/api-reference/next/link

EDIT: Next.js should display a warning if you use string as a child of Link:

https://github.com/vercel/next.js/blob/1925ca039c11f8e8cb4d60f973861008e14bee01/packages/next/client/link.tsx#L298-L301

Anyway, glad we get to the bottom of this 👍

[lucax88x]

They both render a string.

The point is another one.

If Link has a text, it will render an anchor with text, otherwise it will just render the children component, weird stuff.

Not your problem. Infact, it was quite impossible that a child component like Trans could eat a parent, but I was wondering maybe the macro was doing something wrong… but no, Link fault.