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>

.reuse/dep5

@@ -15,7 +15,7 @@ Files: public/icons/*
 Copyright: 2021 The HedgeDoc developers (see AUTHORS file)
 License: LicenseRef-HedgeDoc-Icon-Usage-Guidelines
 
-Files: public/locales/*
+Files: locales/*
 Copyright: 2021 The HedgeDoc developers (see AUTHORS file)
 License: CC-BY-SA-4.0
 

package.json

@@ -52,7 +52,7 @@
     "highlight.js": "11.2.0",
     "i18next": "20.4.0",
     "i18next-browser-languagedetector": "6.1.2",
-    "i18next-http-backend": "1.3.0",
+    "i18next-resources-to-backend": "1.0.0",
     "js-yaml": "4.1.0",
     "katex": "0.13.16",
     "luxon": "2.0.2",

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',

yarn.lock

@@ -1157,6 +1157,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
@@ -4604,13 +4611,6 @@ cross-env@7.0.3:
   dependencies:
     cross-spawn "^7.0.1"
 
-cross-fetch@3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
-  integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
-  dependencies:
-    node-fetch "2.6.1"
-
 cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -7847,12 +7847,12 @@ i18next-browser-languagedetector@6.1.2:
   dependencies:
     "@babel/runtime" "^7.14.6"
 
-i18next-http-backend@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-1.3.0.tgz#fcafb9583cf2942a9c669bd1868ec84a11410536"
-  integrity sha512-49Sf7Dt6GHeFYlCcCTwD39bkaiw7ld8RlGCXw6ZERabN7SXaLM6qRGnd+XbFdPhJHNMHvt/38XiRtJcEgu5Arg==
+i18next-resources-to-backend@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/i18next-resources-to-backend/-/i18next-resources-to-backend-1.0.0.tgz#a6799e30c5d55db9fd7d3872e8ac5ddbf79755f3"
+  integrity sha512-mxntiPK84guqzYP/0T4OwU6BWda57ar7Tw5pU8BjM8dS4rULOtYU4JHMXfCbqZhNQEPCrp1WrVBEPk6yOze8jw==
   dependencies:
-    cross-fetch "3.1.4"
+    "@babel/runtime" "7.14.0"
 
 i18next@20.4.0:
   version "20.4.0"
@@ -10004,7 +10004,7 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
-node-fetch@2.6.1, node-fetch@^2.6.1:
+node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
   integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==