Trans doesn't work if the first element is a HTML tag

[cooljykim]

I'm seeing that the <Trans> doesn't work for some cases.

Component:

import React from 'react';
import { translate, Trans } from 'react-i18next';

const TestTrans = () => {
  const numOfItems = 2;

  return (
    <div>
      <div>Test Trans</div>
      <div>&nbsp;</div>
      <div>
        <div>Case 1: works!</div>
        <Trans i18nKey='testTransKey1' count={numOfItems}>
          {numOfItems} items matched.
        </Trans>
      </div>
      <div>&nbsp;</div>
      <div>
        <div>Case 2: doesn't work!</div>
        <Trans i18nKey='testTransKey2' count={numOfItems}>
          <span className='matchCount'>{numOfItems}</span> items matched.
        </Trans>
      </div>
      <div>&nbsp;</div>
      <div>
        <div>Case 3: works!</div>
        <Trans i18nKey='testTransKey3' count={numOfItems}>
          Result: <span className='matchCount'>{numOfItems}</span> items matched.
        </Trans>
      </div>
    </div>
  );
};

export default translate('test')(TestTrans);

And, here's the locale JSON -

{
  "testTransKey1": "<0>{numOfItems}</0> item matched.",
  "testTransKey1_plural": "<0>{numOfItems}</0> items matched.",

  "testTransKey2": "<0><0>{numOfItems}</0></0> item matched.",
  "testTransKey2_plural": "<0><0>{numOfItems}</0></0> items matched.",

  "testTransKey3": "Result: <1><0>{numOfItems}</0></1> item matched.",
  "testTransKey3_plural": "Result: <1><0>{numOfItems}</0></1> items matched."
}

And, here's what I see on the browser -

Test Trans
 
Case 1: works!
2 items matched.
 
Case 2: doesn't work!
<0>{numOfItems}</0> items matched.
 
Case 3: works!
Result: 2 items matched.

As you can see, the "Case 2" doesn't work. Am I missing something, or is it a bug?

[jamuhl]

will need to look into this...thank you for reporting and the detailed report.

[jamuhl]

found the problem - the regex we used to split nodes has some flaw if same index gets nested (see image)

i'm replacing now the naive approach of splitting by a regex with an ast parser for html.

[jamuhl]

please also take not there might be cases where you like to do interpolation using {{numOfItems}} like d6acc24#diff-0753f873921ce05528a0b0d605e92c45R8

[jamuhl]

react-i18next@5.4.0 comes with the new ast parser and should fix this issue - please check if still encounter any issue. thx

[cooljykim]

@jamuhl , it works well now! Thanks for the prompt fix for this!
(also, thanks for the tip on the interpolation).