Enabling ICU breaks interpolation

the-line commented 1 year ago

🐛 Bug Report

When ICU is enabled on i18next with react-i18next, some interpolations aren't executed. When .use(ICU) is commented out, the interpolation is working correctly.

To Reproduce

https://codesandbox.io/s/icu-interpolation-ix0cl3

Expected behavior

The text "User test has been created" is shown on the page.

Actual behavior

The text "User {{ what }} has been created" is shown on the page. Notice that the interpolation is not executed.

Your Environment

runtime version: Google Chrome 107.0.5304.107 and Mozilla Firefox 107.0
i18next version: i.e. 22.0.6
i18next-icu version: 2.0.3
react-i18next version: 12.0.0
react version: 18.2.0
intl-messageformat version: 9.13.0
os: Windows 11 22H2 (22621.819)

adrai commented 1 year ago

You used the wrong interpolation parenthesis... for ICU it is: User { what } has been created instead of User {{ what }} has been created

the-line commented 1 year ago

That was the problem! Thank you very much for your time to figure this out :)

Maybe mentioning in the documentation when using ICU that the i18next interpolation rules should not be used and only ICU interpolation rules will work.

adrai commented 1 year ago

That was the problem! Thank you very much for your time to figure this out :)

Maybe mentioning in the documentation when using ICU that the i18next interpolation rules should not be used and only ICU interpolation rules will work.

https://github.com/i18next/i18next-icu#advice

the-line commented 1 year ago

Thanks again, and this was a nice case of "You should read the manual".

Sorry about that.

the-line commented 1 year ago

I have changed the sandbox code to point this difference out for reference if someone find this issue.

i18next / i18next-icu