DEV Community

Cover image for Namespace separator syntax using gatsby-plugin-react-i18next
Sung M. Kim
Sung M. Kim

Posted on • Originally published at on

Namespace separator syntax using gatsby-plugin-react-i18next


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

Top comments (0)