Replace i18next-http-backend with i18next-resources-to-backend (#1466)

* Replace i18next-http-backend with i18next-resources-to-backend

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/application-loader/initializers/i18n/i18n.ts

@@ -6,22 +6,28 @@
 
 import i18n from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
-import Backend from 'i18next-http-backend'
+import resourcesToBackend from 'i18next-resources-to-backend'
 import { Settings } from 'luxon'
 import { initReactI18next } from 'react-i18next'
 
-export const setUpI18n = async (frontendAssetsUrl: string): Promise<void> => {
+export const setUpI18n = async (): Promise<void> => {
   await i18n
-    .use(Backend)
+    .use(
+      resourcesToBackend((language, namespace, callback) => {
+        import(`../../../../../locales/${language}.json`)
+          .then((resources) => {
+            callback(null, resources)
+          })
+          .catch((error) => {
+            callback(error, null)
+          })
+      })
+    )
     .use(LanguageDetector)
     .use(initReactI18next)
     .init({
       fallbackLng: 'en',
       debug: process.env.NODE_ENV !== 'production',
-      backend: {
-        loadPath: `${frontendAssetsUrl}locales/{{lng}}.json`
-      },
-
       interpolation: {
         escapeValue: false
       }

src/components/application-loader/initializers/index.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { setUpI18n } from './i18n'
+import { setUpI18n } from './i18n/i18n'
 import { refreshHistoryState } from '../../../redux/history/methods'
 import { fetchAndSetBanner } from './fetch-and-set-banner'
 import { setApiUrl } from '../../../redux/api-url/methods'
@@ -36,7 +36,7 @@ export const createSetUpTaskList = (
   return [
     {
       name: 'Load Translations',
-      task: setUpI18n(frontendAssetsUrl)
+      task: setUpI18n()
     },
     {
       name: 'Load config',