React translation keys with a colon

by | Sep 23, 2022 | React

I am using the react-i18next package in one of the projects I am currently working on.

I recently encountered an issue with some translation keys that contain a “:” not working.

Example: A key with a colon like this does not work

The issue was a low priority but I finally got around to fix it today.

The solution was fairly simple, it just required modifying 2 of the package’s initialization options.

I added the keySeparator and nsSeparator options and set them both to false.

i18n.init({
  keySeparator: false,
  nsSeparator: false,
});

Problem solved.