why I get this error message:

undefined is not an object (evaluating '_i18next.default.services.formatter.add')

Code:

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
import { DateTime } from 'luxon';

i18next
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    react: {
      useSuspense: true
    },
    fallbackLng: 'en',
    compatibilityJSON: 'v3',
    lng: 'de',
    debug: process.env.NODE_ENV === 'development',
    backend: {
      loadPath: `http://192.168.0.249:4000/public/locales/{{lng}}/translation.json`,
    },
    interpolation: {
      escapeValue: false,
    },
    keySeparator: '.'
  });

// new usage
i18next.services.formatter.add('DATE_HUGE', (value, lng, options) => {
  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)
});

export default i18next;

Can anyone help me to solve this issue ?

I get it from there:

https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#formatting

CodePudding user response：

You're probably not using i18next >= 21.3.0

in that case use the legacy formatting option: https://www.i18next.com/translation-function/formatting#legacy-format-function-i18next-less-than-21.3.0

interpolation: {
  escapeValue: false, // not needed for react as it escapes by default
  format: (value, format, lng) => { // legacy usage
    if (value instanceof Date) {
      return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
    }
    return value;
  }
},