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: ":"