Trans - reserved component keys

[joekur]

💥 Regression Report

While it's acknowledged in the docs that self-closing html tags such as link and img are reserved and cannot be used as keys in the components prop, previously using a capitalized version such as Link worked fine. In the newest version (I'm guessing due to the change in html-parse-stringify? #1283), it no longer works as expected. It seems this is a breaking regression (happened in one of our apps), but I'm not sure if there was ever an intended support for this. At the least, may be worth mentioning in the changelog.

Last working version

Worked up to version: 11.8.12

Stopped working in version: 11.8.13

To Reproduce

Steps to reproduce the behavior:

"seeMore": "click <Link>here</Link> for more"

<Trans
  i18nKey="seeMore"
  components={{ Link: <a href="/foo"> }}
/>

Expected behavior

Expected:

click <a href="/foo">here</a> for more

Actual:

click <a href="/foo"></a>here for more

Your Environment

• runtime version: node v12.18.3, chrome 89.0.4389.128
• i18next version: 19.9.2
• os: Mac

[jamuhl]

shouldn't it be:

<Trans
  i18nKey="seeMore"
  components={{ Link: <a href="/foo">dummy</a> }}
/>

[joekur]

shouldn't it be:

<Trans
  i18nKey="seeMore"
  components={{ Link: <a href="/foo">dummy</a> }}
/>

Tested, and the outcome is the same either way.

[steven-carrell]

Tested, and the outcome is the same either way.

You also lose the translation for the link test 🤷

[jamuhl]

@kachkaev @adrai did we introduce a regression with #1283

Guess the tests only have lower cased HTML tags - as that is more regular in writing those - but still if uppercase does not work anymore we might have to mention that in the docs (if we can't fix it)?!?

[adrai]

Yes, I can confirm, this is a regression introduced by replacing html-parse-stringify...

html-parse-stringify:

[
    {
        "type": "tag",
        "name": "0",
        "voidElement": false,
        "attrs": {},
        "children": [
            {
                "type": "text",
                "content": "click "
            },
            {
                "type": "tag",
                "name": "Link",
                "voidElement": true,
                "attrs": {},
                "children": []
            },
            {
                "type": "text",
                "content": "here"
            },
            {
                "type": "text",
                "content": " for more"
            }
        ]
    }
]

html-parse-stringify2:

[
    {
        "type": "tag",
        "name": "0",
        "voidElement": false,
        "attrs": {},
        "children": [
            {
                "type": "text",
                "content": "click "
            },
            {
                "type": "tag",
                "name": "Link",
                "voidElement": false,
                "attrs": {},
                "children": [
                    {
                        "type": "text",
                        "content": "here"
                    }
                ]
            },
            {
                "type": "text",
                "content": " for more"
            }
        ]
    }
]

[adrai]

@HenrikJoreteg this is the original "issue"

[HenrikJoreteg]

@adrai html-parse-stringify has been updated v3.0.1 and... i've given you rights to make changes to it as you see fit.

[adrai]

fixed with v11.8.14