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

1i18next.t("header:text");

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

1{2  "text": "Greetings"3}

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.

1// In your gatsby-config.js2plugins: [3  {4    resolve: `gatsby-plugin-react-i18next`,5    options: {6      path: `${__dirname}/locales`,7      languages: [`en`, `es`, `de`],8      defaultLanguage: `en`,9
10      // you can pass any i18next options11      // pass following options to allow message content as a key12      i18nextOptions: {13        interpolation: {14          escapeValue: false, // not needed for react as it escapes by default15        },16        keySeparator: false,17        // 👇 issue here18        nsSeparator: false,19      },20      pages: [21        {22          matchPath: "/:lang?/blog/:uid",23          getLanguageFromPath: true,24          excludeLanguages: ["es"],25        },26        {27          matchPath: "/preview",28          languages: ["en"],29        },30      ],31    },32  },33];

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.)

1nsSeparator: ":";