Namespace separator syntax using gatsby-plugin-react-i18next

Introduction

First time learning i18n (internationalization) using gatsby-plugin-react-i18next

I chose this specific Gatsby plugin as it wraps around react-i18next

The reason is similar to Robin Wieruch's description in his blog, React Internationalization with i18n > REACT INTERNATIONALIZATION: WHICH LIBRARY SHOULD I USE?.

Problem

But I had trouble accessing keys by namespace using ":" syntax.

e.g.) Accessing text under header namespace

i18next.t('header:text')

declared as following file, <project root>/locales/<language>/header.json.

{
    text: "Greetings"
}

The React page was displaying header:text instead of Greetings.

Issue

The issue was to blindly copy the example configuration in the gatsby-plugin-react-i18net > Configure the plugin documentation.

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-react-i18next`,
    options: {
      path: `${__dirname}/locales`,
      languages: [`en`, `es`, `de`],
      defaultLanguage: `en`,

      // you can pass any i18next options
      // pass following options to allow message content as a key
      i18nextOptions: {
        interpolation: {
          escapeValue: false // not needed for react as it escapes by default
        },
        keySeparator: false,
        // 👇 issue here
        nsSeparator: false
      },
      pages: [
        {
          matchPath: '/:lang?/blog/:uid',
          getLanguageFromPath: true,
          excludeLanguages: ['es']
        },
        {
          matchPath: '/preview',
          languages: ['en']
        }
      ]
    }
  }
];

I didn't know each of those options without understanding each option.

After few hours of digging around, the culprit turned out to be nsSeparator.

Solution

Either leave the nsSeparator option out for a default : separator or pass a string to it to use the namespace syntax.

e.g.)

nsSeparator: ":"