DEV Community

Cover image for Namespace separator syntax using gatsby-plugin-react-i18next

Namespace separator syntax using gatsby-plugin-react-i18next

Sung M. Kim
Exploring the world of TypeScript, React & Node
Originally published at on ・2 min read


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


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

e.g.) Accessing text under header namespace


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

    text: "Greetings"

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


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.


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


nsSeparator: ":"

Discussion (0)

Forem Open with the Forem app