ReferenceError: XMLHttpRequest is not defined on SSR

ReferenceError: XMLHttpRequest is not defined
    at Object.ajax (/code/frontend/node_modules/i18next-xhr-backend/dist/commonjs/ajax.js:46:5)
    at /code/frontend/node_modules/i18next-xhr-backend/dist/commonjs/index.js:110:24
    at Array.forEach (<anonymous>)
    at Backend.create (/code/frontend/node_modules/i18next-xhr-backend/dist/commonjs/index.js:107:17)
    at /code/frontend/node_modules/i18next-chained-backend/dist/commonjs/index.js:92:25
    at Array.forEach (<anonymous>)
    at Backend.create (/code/frontend/node_modules/i18next-chained-backend/dist/commonjs/index.js:91:21)
    at Connector.saveMissing (/code/frontend/node_modules/i18next/dist/commonjs/BackendConnector.js:295:20)
    at send (/code/frontend/node_modules/i18next/dist/commonjs/Translator.js:195:37)
    at Translator.translate (/code/frontend/node_modules/i18next/dist/commonjs/Translator.js:210:13)
    at I18n.t (/code/frontend/node_modules/i18next/dist/commonjs/i18next.js:356:73)
    at Interpolate.fixedT [as t] (/code/frontend/node_modules/i18next/dist/commonjs/i18next.js:342:21)
    at Interpolate.render (/code/frontend/node_modules/react-i18next/dist/commonjs/Interpolate.js:58:25)
    at d (/code/frontend/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:28:211)
    at wa (/code/frontend/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:28:493)
    at a.render (/code/frontend/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:18)

i18n
    .use(Backend)
    .use(intervalPlural)
    .use(languageDetector)
    .use(reactI18nextModule)
    .init(
        {
            fallbackLng: false,
            saveMissing: true,
            appendNamespaceToCIMode: true,

            // allow keys to be phrases having `:`, `.`
            nsSeparator: false,
            keySeparator: false,

            // have a common namespace used around the full app
            ns: ['translations'],
            defaultNS: 'translations',

            debug: false,
            react: { wait: true },

            // Language detection
            detection: {
                // order and from where user language should be detected
                order: ['urlDetector', 'querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],

                // keys or params to lookup language from
                lookupCookie: 'locale',
                lookupQuerystring: 'lng',
                lookupLocalStorage: 'i18nextLng',

                // cache user language on
                caches: ['localStorage', 'cookie'],
                excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)

                // optional expire and domain for set cookie
                // cookieMinutes: 10,
                // cookieDomain: 'myDomain',

                // optional htmlTag with lang attribute, the default is:
                // htmlTag: document.documentElement,
            },

            backend: {
                backends: [
                    XHR
                ],

                backendOptions: [
                    {
                        // path where resources get loaded from, or a function
                        loadPath: '/api/translations/{{lng}}/{{ns}}',

                        // path to post missing resources
                        addPath: '/api/translations/add/{{lng}}/{{ns}}',

                        // your backend server supports multiloading
                        // /locales/resources.json?lng=de+en&ns=ns1+ns2
                        allowMultiLoading: false, // set loadPath: '/locales/resources.json?lng={{lng}}&ns={{ns}}' to adapt to multiLoading

                        // allow cross domain requests
                        crossDomain: false,

                        // allow credentials on cross domain requests
                        withCredentials: false,
                    },
                ],
            },
        },
        error => {
            if (error) {
                logger.error(error);
            }
        }
    );

[arsnl]

xhr-backend is not "universal"

[arsnl]

@tavurth

All you have to do is to define another “ajax” (https://github.com/i18next/i18next-xhr-backend/blob/0ec7d848236c379a90017fff53640380a4d0d46c/src/index.js#L11)

I suggest axios.

Eg

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';
import axios from 'axios';

i18next
  .use(XHR)
  .init({
    backend: {
        ajax: axios
        ...
    }
  });

Now you have a universal backend plugin.