Web: i18n: Replaced i18next-http-backend package with custom realization from @appserver/common/utils/i18next-http-backend (fix issue: too many same translations files are loading at once)

packages/asc-web-common/components/Section/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "../../constants";
 import { loadLanguagePath } from "../../utils";
 

packages/asc-web-common/constants/sharedDependencies.js

@@ -93,10 +93,6 @@ module.exports = {
     singleton: true,
     requiredVersion: deps["react-i18next"],
   },
-  "i18next-http-backend": {
-    singleton: true,
-    requiredVersion: deps["i18next-http-backend"],
-  },
   "prop-types": {
     singleton: true,
     requiredVersion: deps["prop-types"],

packages/asc-web-common/package.json

@@ -15,7 +15,6 @@
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "i18next": "^20.6.1",
-    "i18next-http-backend": "^1.3.1",
     "mobx": "^6.3.3",
     "mobx-react": "^7.2.0",
     "moment": "^2.29.1",

packages/asc-web-common/sw/register.js

@@ -5,7 +5,7 @@ import { Workbox } from "workbox-window";
 import SnackBar from "@appserver/components/snackbar";
 import i18n from "i18next";
 import { useTranslation, initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "../constants";
 import { loadLanguagePath } from "../utils";
 

packages/asc-web-common/utils/i18next-http-backend/index.js

@@ -0,0 +1,2 @@
+import backend from './lib/index.js'
+export default backend

packages/asc-web-common/utils/i18next-http-backend/lib/getFetch.cjs

@@ -0,0 +1,15 @@
+var fetchApi
+if (typeof fetch === 'function') {
+  if (typeof global !== 'undefined' && global.fetch) {
+    fetchApi = global.fetch
+  } else if (typeof window !== 'undefined' && window.fetch) {
+    fetchApi = window.fetch
+  }
+}
+
+if (typeof require !== 'undefined' && (typeof window === 'undefined' || typeof window.document === 'undefined')) {
+  var f = fetchApi || require('cross-fetch')
+  if (f.default) f = f.default
+  exports.default = f
+  module.exports = exports.default
+}

packages/asc-web-common/utils/i18next-http-backend/lib/index.js

@@ -0,0 +1,243 @@
+import { defaults, makePromise } from "./utils.js";
+import request from "./request.js";
+
+const getDefaults = () => {
+  return {
+    loadPath: "/locales/{{lng}}/{{ns}}.json",
+    addPath: "/locales/add/{{lng}}/{{ns}}",
+    allowMultiLoading: false,
+    parse: (data) => JSON.parse(data),
+    stringify: JSON.stringify,
+    parsePayload: (namespace, key, fallbackValue) => ({
+      [key]: fallbackValue || "",
+    }),
+    request,
+    reloadInterval: typeof window !== "undefined" ? false : 60 * 60 * 1000,
+    customHeaders: {},
+    queryStringParams: {},
+    crossDomain: false, // used for XmlHttpRequest
+    withCredentials: false, // used for XmlHttpRequest
+    overrideMimeType: false, // used for XmlHttpRequest
+    requestOptions: {
+      // used for fetch
+      mode: "cors",
+      credentials: "same-origin",
+      cache: "default",
+    },
+  };
+};
+
+class Backend {
+  constructor(services, options = {}, allOptions = {}) {
+    this.services = services;
+    this.options = options;
+    this.allOptions = allOptions;
+    this.type = "backend";
+    this.init(services, options, allOptions);
+  }
+
+  init(services, options = {}, allOptions = {}) {
+    this.services = services;
+    this.options = defaults(options, this.options || {}, getDefaults());
+    this.allOptions = allOptions;
+    if (this.services && this.options.reloadInterval) {
+      setInterval(() => this.reload(), this.options.reloadInterval);
+    }
+  }
+
+  readMulti(languages, namespaces, callback) {
+    this._readAny(languages, languages, namespaces, namespaces, callback);
+  }
+
+  read(language, namespace, callback) {
+    this._readAny([language], language, [namespace], namespace, callback);
+  }
+
+  _readAny(
+    languages,
+    loadUrlLanguages,
+    namespaces,
+    loadUrlNamespaces,
+    callback
+  ) {
+    let loadPath = this.options.loadPath;
+    if (typeof this.options.loadPath === "function") {
+      loadPath = this.options.loadPath(languages, namespaces);
+    }
+
+    loadPath = makePromise(loadPath);
+
+    loadPath.then((resolvedLoadPath) => {
+      if (!resolvedLoadPath) return callback(null, {});
+      const url = this.services.interpolator.interpolate(resolvedLoadPath, {
+        lng: languages.join("+"),
+        ns: namespaces.join("+"),
+      });
+      this.loadUrl(url, callback, loadUrlLanguages, loadUrlNamespaces);
+    });
+  }
+
+  loadUrl(url, callback, languages, namespaces) {
+    //console.log("loadUrl", url, languages, namespaces);
+
+    if (!window.i18n) {
+      window.i18n = {
+        inLoad: [],
+        loaded: {},
+      };
+    }
+
+    var index = window.i18n.inLoad.findIndex((item) => item.url == url);
+
+    if (index > -1) {
+      //console.log("skip already in load url", url);
+
+      if (window.i18n.loaded[url]) {
+        return callback(null, window.i18n.loaded[url].data);
+      }
+
+      window.i18n.inLoad[index].callbacks.push(callback);
+
+      return;
+    }
+
+    if (namespaces == "translation") {
+      //console.log("skip defaultNS");
+      return callback(
+        `failed loading ${url}; status code: 404`,
+        false /* retry */
+      );
+    }
+
+    window.i18n.inLoad.push({ url, callbacks: [callback] });
+
+    this.options.request(this.options, url, undefined, (err, res) => {
+      if (res && ((res.status >= 500 && res.status < 600) || !res.status))
+        return this.sendCallbacks(
+          url,
+          namespaces,
+          `failed loading ${url}; status code: ${res.status}`,
+          true /* retry */
+        );
+      if (res && res.status >= 400 && res.status < 500)
+        return this.sendCallbacks(
+          url,
+          namespaces,
+          `failed loading ${url}; status code: ${res.status}`,
+          false /* no retry */
+        );
+      if (
+        !res &&
+        err &&
+        err.message &&
+        err.message.indexOf("Failed to fetch") > -1
+      )
+        return this.sendCallbacks(
+          url,
+          namespaces,
+          `failed loading ${url}: ${err.message}`,
+          true /* retry */
+        );
+      if (err) return this.sendCallbacks(url, namespaces, err, false);
+
+      let ret, parseErr;
+      try {
+        if (typeof res.data === "string") {
+          ret = this.options.parse(res.data, languages, namespaces);
+        } else {
+          // fallback, which omits calling the parse function
+          ret = res.data;
+        }
+      } catch (e) {
+        parseErr = `failed parsing ${url} to json`;
+      }
+      if (parseErr) return this.sendCallbacks(url, namespaces, parseErr, false);
+      this.sendCallbacks(url, namespaces, null, ret);
+    });
+  }
+
+  sendCallbacks(url, namespaces, error, data) {
+    var index = window.i18n.inLoad.findIndex((item) => item.url == url);
+    if (index == -1) return;
+
+    window.i18n.inLoad[index].callbacks.forEach((cb) => cb(error, data));
+
+    window.i18n.inLoad.splice(index, 1);
+
+    if (!error) {
+      window.i18n.loaded[url] = {
+        namespaces,
+        data,
+      };
+    }
+  }
+
+  create(languages, namespace, key, fallbackValue, callback) {
+    // If there is a falsey addPath, then abort -- this has been disabled.
+    if (!this.options.addPath) return;
+    if (typeof languages === "string") languages = [languages];
+    const payload = this.options.parsePayload(namespace, key, fallbackValue);
+    let finished = 0;
+    const dataArray = [];
+    const resArray = [];
+    languages.forEach((lng) => {
+      let addPath = this.options.addPath;
+      if (typeof this.options.addPath === "function") {
+        addPath = this.options.addPath(lng, namespace);
+      }
+      const url = this.services.interpolator.interpolate(addPath, {
+        lng: lng,
+        ns: namespace,
+      });
+
+      this.options.request(this.options, url, payload, (data, res) => {
+        // TODO: if res.status === 4xx do log
+        finished += 1;
+        dataArray.push(data);
+        resArray.push(res);
+        if (finished === languages.length) {
+          if (callback) callback(dataArray, resArray);
+        }
+      });
+    });
+  }
+
+  reload() {
+    const { backendConnector, languageUtils, logger } = this.services;
+    const currentLanguage = backendConnector.language;
+    if (currentLanguage && currentLanguage.toLowerCase() === "cimode") return; // avoid loading resources for cimode
+
+    const toLoad = [];
+    const append = (lng) => {
+      const lngs = languageUtils.toResolveHierarchy(lng);
+      lngs.forEach((l) => {
+        if (toLoad.indexOf(l) < 0) toLoad.push(l);
+      });
+    };
+
+    append(currentLanguage);
+
+    if (this.allOptions.preload)
+      this.allOptions.preload.forEach((l) => append(l));
+
+    toLoad.forEach((lng) => {
+      this.allOptions.ns.forEach((ns) => {
+        backendConnector.read(lng, ns, "read", null, null, (err, data) => {
+          if (err)
+            logger.warn(
+              `loading namespace ${ns} for language ${lng} failed`,
+              err
+            );
+          if (!err && data)
+            logger.log(`loaded namespace ${ns} for language ${lng}`, data);
+
+          backendConnector.loaded(`${lng}|${ns}`, err, data);
+        });
+      });
+    });
+  }
+}
+
+Backend.type = "backend";
+
+export default Backend;

packages/asc-web-common/utils/i18next-http-backend/lib/request.js

@@ -0,0 +1,127 @@
+import { defaults, hasXMLHttpRequest } from './utils.js'
+import * as fetchNode from './getFetch.cjs'
+
+let fetchApi
+if (typeof fetch === 'function') {
+  if (typeof global !== 'undefined' && global.fetch) {
+    fetchApi = global.fetch
+  } else if (typeof window !== 'undefined' && window.fetch) {
+    fetchApi = window.fetch
+  }
+}
+let XmlHttpRequestApi
+if (hasXMLHttpRequest()) {
+  if (typeof global !== 'undefined' && global.XMLHttpRequest) {
+    XmlHttpRequestApi = global.XMLHttpRequest
+  } else if (typeof window !== 'undefined' && window.XMLHttpRequest) {
+    XmlHttpRequestApi = window.XMLHttpRequest
+  }
+}
+let ActiveXObjectApi
+if (typeof ActiveXObject === 'function') {
+  if (typeof global !== 'undefined' && global.ActiveXObject) {
+    ActiveXObjectApi = global.ActiveXObject
+  } else if (typeof window !== 'undefined' && window.ActiveXObject) {
+    ActiveXObjectApi = window.ActiveXObject
+  }
+}
+if (!fetchApi && fetchNode && !XmlHttpRequestApi && !ActiveXObjectApi) fetchApi = fetchNode.default || fetchNode // because of strange export
+if (typeof fetchApi !== 'function') fetchApi = undefined
+
+const addQueryString = (url, params) => {
+  if (params && typeof params === 'object') {
+    let queryString = ''
+    // Must encode data
+    for (const paramName in params) {
+      queryString += '&' + encodeURIComponent(paramName) + '=' + encodeURIComponent(params[paramName])
+    }
+    if (!queryString) return url
+    url = url + (url.indexOf('?') !== -1 ? '&' : '?') + queryString.slice(1)
+  }
+  return url
+}
+
+// fetch api stuff
+const requestWithFetch = (options, url, payload, callback) => {
+  if (options.queryStringParams) {
+    url = addQueryString(url, options.queryStringParams)
+  }
+  const headers = defaults({}, typeof options.customHeaders === 'function' ? options.customHeaders() : options.customHeaders)
+  if (payload) headers['Content-Type'] = 'application/json'
+  fetchApi(url, defaults({
+    method: payload ? 'POST' : 'GET',
+    body: payload ? options.stringify(payload) : undefined,
+    headers
+  }, typeof options.requestOptions === 'function' ? options.requestOptions(payload) : options.requestOptions)).then((response) => {
+    if (!response.ok) return callback(response.statusText || 'Error', { status: response.status })
+    response.text().then((data) => {
+      callback(null, { status: response.status, data })
+    }).catch(callback)
+  }).catch(callback)
+}
+
+// xml http request stuff
+const requestWithXmlHttpRequest = (options, url, payload, callback) => {
+  if (payload && typeof payload === 'object') {
+    // if (!cache) payload._t = Date.now()
+    // URL encoded form payload must be in querystring format
+    payload = addQueryString('', payload).slice(1)
+  }
+
+  if (options.queryStringParams) {
+    url = addQueryString(url, options.queryStringParams)
+  }
+
+  try {
+    let x
+    if (XmlHttpRequestApi) {
+      x = new XmlHttpRequestApi()
+    } else {
+      x = new ActiveXObjectApi('MSXML2.XMLHTTP.3.0')
+    }
+    x.open(payload ? 'POST' : 'GET', url, 1)
+    if (!options.crossDomain) {
+      x.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+    }
+    x.withCredentials = !!options.withCredentials
+    if (payload) {
+      x.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
+    }
+    if (x.overrideMimeType) {
+      x.overrideMimeType('application/json')
+    }
+    let h = options.customHeaders
+    h = typeof h === 'function' ? h() : h
+    if (h) {
+      for (const i in h) {
+        x.setRequestHeader(i, h[i])
+      }
+    }
+    x.onreadystatechange = () => {
+      x.readyState > 3 && callback(x.status >= 400 ? x.statusText : null, { status: x.status, data: x.responseText })
+    }
+    x.send(payload)
+  } catch (e) {
+    console && console.log(e)
+  }
+}
+
+const request = (options, url, payload, callback) => {
+  if (typeof payload === 'function') {
+    callback = payload
+    payload = undefined
+  }
+  callback = callback || (() => {})
+
+  if (fetchApi) {
+    // use fetch api
+    return requestWithFetch(options, url, payload, callback)
+  }
+
+  if (hasXMLHttpRequest() || typeof ActiveXObject === 'function') {
+    // use xml http request
+    return requestWithXmlHttpRequest(options, url, payload, callback)
+  }
+}
+
+export default request

packages/asc-web-common/utils/i18next-http-backend/lib/utils.js

@@ -0,0 +1,44 @@
+const arr = []
+const each = arr.forEach
+const slice = arr.slice
+
+export function defaults (obj) {
+  each.call(slice.call(arguments, 1), (source) => {
+    if (source) {
+      for (const prop in source) {
+        if (obj[prop] === undefined) obj[prop] = source[prop]
+      }
+    }
+  })
+  return obj
+}
+
+export function hasXMLHttpRequest () {
+  return (typeof XMLHttpRequest === 'function' || typeof XMLHttpRequest === 'object')
+}
+
+/**
+ * Determine whether the given `maybePromise` is a Promise.
+ *
+ * @param {*} maybePromise
+ *
+ * @returns {Boolean}
+ */
+function isPromise (maybePromise) {
+  return !!maybePromise && typeof maybePromise.then === 'function'
+}
+
+/**
+ * Convert any value to a Promise than will resolve to this value.
+ *
+ * @param {*} maybePromise
+ *
+ * @returns {Promise}
+ */
+export function makePromise (maybePromise) {
+  if (isPromise(maybePromise)) {
+    return maybePromise
+  }
+
+  return Promise.resolve(maybePromise)
+}

products/ASC.CRM/Client/src/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";

products/ASC.Calendar/Client/src/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";

products/ASC.Files/Client/src/components/panels/EmbeddingPanel/i18n.js

@@ -1,35 +1,39 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "EmbeddingPanel"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "EmbeddingPanel"),
+    },
 
-  ns: ["EmbeddingPanel", "Common"],
-  defaultNS: "EmbeddingPanel",
+    ns: ["EmbeddingPanel", "Common"],
+    defaultNS: "EmbeddingPanel",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Files/Client/src/components/panels/SelectFileDialog/i18n.js

@@ -1,35 +1,39 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: ["SelectFile", "Common", "Home", "Translations"],
-  defaultNS: "SelectFile",
+    ns: ["SelectFile", "Common", "Home", "Translations"],
+    defaultNS: "SelectFile",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Files/Client/src/components/panels/SelectFileInput/i18n.js

@@ -1,35 +1,39 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: ["SelectFile"],
-  defaultNS: "SelectFile",
+    ns: ["SelectFile"],
+    defaultNS: "SelectFile",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Files/Client/src/components/panels/SelectFolderDialog/i18n.js

@@ -1,35 +1,39 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: ["SelectFolder"],
-  defaultNS: "SelectFolder",
+    ns: ["SelectFolder"],
+    defaultNS: "SelectFolder",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
-export default newInstance;
+export default newInstance;

products/ASC.Files/Client/src/components/panels/SelectFolderInput/i18n.js

@@ -1,35 +1,39 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: ["SelectFolder"],
-  defaultNS: "SelectFolder",
+    ns: ["SelectFolder"],
+    defaultNS: "SelectFolder",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Files/Client/src/components/panels/SharingPanel/i18n.js

@@ -1,42 +1,46 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: [
-    "SharingPanel",
-    "Common",
-    "Translations",
-    "EmbeddingPanel",
-    "Home",
-    "ChangeOwnerPanel",
-  ],
-  defaultNS: "SharingPanel",
+    ns: [
+      "SharingPanel",
+      "Common",
+      "Translations",
+      "EmbeddingPanel",
+      "Home",
+      "ChangeOwnerPanel",
+    ],
+    defaultNS: "SharingPanel",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Files/Client/src/helpers/i18n.js

@@ -1,35 +1,39 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: ["Home"],
-  defaultNS: "Home",
+    ns: ["Home"],
+    defaultNS: "Home",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Files/Client/src/i18n.js

@@ -1,5 +1,6 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";
@@ -8,40 +9,43 @@ const newInstance = i18n.createInstance();
 
 const lng = localStorage.getItem(LANGUAGE) || "en";
 
-newInstance.use(Backend).init({
-  lng: lng,
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: lng,
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  ns: [
-    "DownloadDialog",
-    "DeleteDialog",
-    "EmptyTrashDialog",
-    "ConvertDialog",
-    "ConnectDialog",
-    "ConflictResolveDialog",
-    "DeleteThirdPartyDialog",
-    "ThirdPartyMoveDialog",
-  ],
+    ns: [
+      "DownloadDialog",
+      "DeleteDialog",
+      "EmptyTrashDialog",
+      "ConvertDialog",
+      "ConnectDialog",
+      "ConflictResolveDialog",
+      "DeleteThirdPartyDialog",
+      "ThirdPartyMoveDialog",
+    ],
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-    allowMultiLoading: false,
-    crossDomain: true,
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+      allowMultiLoading: false,
+      crossDomain: true,
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Files/Client/src/pages/PrivateRoomsPage/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "PrivacyPage"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "PrivacyPage"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Mail/Client/src/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";

products/ASC.People/Client/src/components/GroupSelector/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "GroupSelector"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "GroupSelector"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.People/Client/src/components/PeopleSelector/i18n.js

@@ -1,36 +1,40 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
 
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: ["PeopleSelector", "Common", "Translations"],
-  defaultNS: "PeopleSelector",
+    ns: ["PeopleSelector", "Common", "Translations"],
+    defaultNS: "PeopleSelector",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.People/Client/src/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";
@@ -24,6 +24,8 @@ i18n
 
     backend: {
       loadPath: loadLanguagePath(config.homepage),
+      allowMultiLoading: false,
+      crossDomain: false,
     },
 
     ns: ["ChangePasswordDialog", "ChangeEmailDialog"],

products/ASC.People/Client/src/pages/My/i18n.js

@@ -1,35 +1,39 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  ns: ["Profile", "ProfileAction", "Common"],
-  defaultNS: "Profile",
+    ns: ["Profile", "ProfileAction", "Common"],
+    defaultNS: "Profile",
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

products/ASC.Projects/Client/src/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";

web/ASC.Web.Client/src/components/NavMenu/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "NavMenu"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "NavMenu"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/components/dialogs/PreparationPortalDialog/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/components/pages/About/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "About"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "About"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/components/pages/Errors/401/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "Errors"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "Errors"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/components/pages/Errors/403/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "Errors"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "Errors"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/components/pages/Errors/404/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "Errors"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "Errors"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/components/pages/Errors/520/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "Errors"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "Errors"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/components/pages/Errors/Invalid/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "Errors"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "Errors"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/helpers/toastr/i18n.js

@@ -1,32 +1,36 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import { LANGUAGE } from "@appserver/common/constants";
 import config from "../../../package.json";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage, "ToastHeaders"),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage, "ToastHeaders"),
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Client/src/i18n.js

@@ -1,32 +1,38 @@
 import i18n from "i18next";
-import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";
 
 const newInstance = i18n.createInstance();
 
-newInstance.use(Backend).init({
-  lng: localStorage.getItem(LANGUAGE) || "en",
-  fallbackLng: "en",
-  load: "currentOnly",
-  //debug: true,
+newInstance
+  .use(Backend)
+  .use(initReactI18next)
+  .init({
+    lng: localStorage.getItem(LANGUAGE) || "en",
+    fallbackLng: "en",
+    load: "currentOnly",
+    //debug: true,
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-    format: function (value, format) {
-      if (format === "lowercase") return value.toLowerCase();
-      return value;
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === "lowercase") return value.toLowerCase();
+        return value;
+      },
     },
-  },
 
-  backend: {
-    loadPath: loadLanguagePath(config.homepage),
-  },
+    backend: {
+      loadPath: loadLanguagePath(config.homepage),
+      allowMultiLoading: false,
+      crossDomain: false,
+    },
 
-  react: {
-    useSuspense: false,
-  },
-});
+    react: {
+      useSuspense: false,
+    },
+  });
 
 export default newInstance;

web/ASC.Web.Editor/src/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";
@@ -10,8 +10,8 @@ const newInstance = i18n.createInstance();
 const lng = localStorage.getItem(LANGUAGE) || "en";
 
 newInstance
-  .use(initReactI18next)
   .use(Backend)
+  .use(initReactI18next)
   .init({
     lng: lng,
     fallbackLng: "en",

web/ASC.Web.Login/src/i18n.js

@@ -1,6 +1,6 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
-import Backend from "i18next-http-backend";
+import Backend from "@appserver/common/utils/i18next-http-backend";
 import config from "../package.json";
 import { LANGUAGE } from "@appserver/common/constants";
 import { loadLanguagePath } from "@appserver/common/utils";
@@ -10,8 +10,8 @@ const newInstance = i18n.createInstance();
 const lng = localStorage.getItem(LANGUAGE) || "en";
 
 newInstance
-  .use(initReactI18next)
   .use(Backend)
+  .use(initReactI18next)
   .init({
     lng: lng,
     fallbackLng: "en",