i18next with namespace does not fetch expected translation file

Question

I'm trying to setup localisation for an existing app. I've gotten fairly far. But something is not quite right.

My setup is having multiple translation calls in the files like so: {attribute: 'stress', text: t('dass21::I found it hard to wind down')},

As you can see, I changed the namespace separator to be a double :: since I have a lot of medical specific sentences which are hard to think keys for, so the actual sentence is the key.

To export the translation into json translations files I use: i18next 'src/**/*.js' which works fine. It makes a folder for every language, and in that folder, for every namespace it makes a file. (Eg in this case, it will make a file dass21.json).

My configuration for the i18next-parser is:

module.exports = {
  // Since keys hold regular english I can't have the default settings
  namespaceSeparator: '::',
  keySeparator: '_',
  pluralSeparator: "|",

  locales: ['en', 'es'],

  output: 'assets/locales/$LOCALE/$NAMESPACE.json',
}

I matches those settings in the i18next init like so:

import i18next from "i18next";

import HttpApi from 'i18next-http-backend';

i18next
.use(HttpApi)
.init({
  backend: {
    // for all available options read the backend's repository readme file
    loadPath: '/assessments/locales/{{lng}}/{{ns}}.json',
  },

  fallbackLng: 'en',
  lng: 'en',
  supportedLngs: ['en', 'es'],

  namespaceSeparator: '::',
  keySeparator: '_',
  pluralSeparator: "|",
});

const t = i18next.t

export default t

As you can see, I want to load my translation files over http (which are served by a node server and this works). However, it only tries to load a generic translation file called translation.js and none of my specific namespace files. Even though the call to t with dass21::I found it hard to wind down is called. (Since it is visible on the screen using its key).

How can I make sure it also tries to load the namespace specific files over http, while having the custom namespace separators?

Answer 1

If you're using i18next, make sure you pass in the desired namespace in to the useTranslation or withTranslation function: https://react.i18next.com/guides/multiple-translation-files

Alternatively, use the ns init option and define your namespaces.