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: ":"
Top comments (0)