Can't use a number as index on .rich

[razzeee]

Description

Trying to port from next-i18n right now.

Having some trouble with the <Trans /> Component

For e.g. we have a translation like this

"contribute-languages": "All diese Übersetzungen wurden durch die Community ermöglicht. Falls du helfen möchstest bei der Übersetzung von Flathub, <1>tritt dem Flathub Übersetzer-Team bei</1>."

If I try to render it like

<p className="pt-8">
          {t.rich("contribute-languages", {
            1: (chunks) => (
              <a
                target="_blank"
                rel="noreferrer"
                className="no-underline hover:underline"
                href="https://hosted.weblate.org/engage/flathub/"
              >
                {chunks}
              </a>
            ),
          })}
        </p>

It fails with

Error: INVALID_MESSAGE: UNMATCHED_CLOSING_TAG
    at Languages (pages/languages.tsx:45:13)
  43 |         </ul>
  44 |         <p className="pt-8">
> 45 |           {t.rich("contribute-languages", {
     |             ^
  46 |             1: (chunks) => (
  47 |               <a
  48 |                 target="_blank" {
  code: 'INVALID_MESSAGE',
  originalMessage: 'UNMATCHED_CLOSING_TAG'
}

If I change the 1 to t it starts to work.

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/razzeee/next-intl-repro

Reproduction description

Steps to reproduce:

1. Open page
2. See errors in log and nothing is translated

Expected behaviour

It should be translated

[amannn]

Hmm, interesting. next-intl currently uses intl-messageformat for parsing messages. Can you check if this behavior also applies upstream?

[razzeee]

Yes, seems to already be broken upstream https://stackblitz.com/edit/vitejs-vite-3hzjrmcc?file=src%2FApp.tsx

[amannn]

Thanks for reporting the bug upstream!

[razzeee]

So it seems like upstream will not fix this. Not sure how to proceed.

For my project, that would unfortunately mean, that we would have to rewrite every rich translation string and thus cause updates in ~55 languages per string. I don't think that's something I would want.

[amannn]

We're currently at the mercy of Format.js here. I haven't dug too far into this, maybe they're right about not allowing rich tags to start with a number (as per XML spec).

Maybe you could globally replace the tags with a regex that prefixes <\d+> with a character like t (e.g. <t1>test</t1>)?

[razzeee]

I guess that would work, if I first lock weblate, then merge all outstanding changes, then do the replacement, then push and force weblate to throw away everything and import from scratch. Not sure if we loose comments etc in weblate then, but it might at least work.