fix: avoid locales caching issues w/ custom i18next plugin

app/entry.client.tsx

@@ -15,12 +15,12 @@ import {
 import i18next from 'i18next';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
-import Backend from 'i18next-http-backend';
 import { getInitialNamespaces } from 'remix-i18next';
 import ClientStyleContext from './src/ClientStyleContext';
 import createEmotionCache from './src/createEmotionCache';
 import createTheme from './src/theme';
 import PageStyles from './src/PageStyles';
+import Backend from './i18next-fetch-backend';
 import i18n from './i18n';
 
 interface ClientCacheProviderProps {
@@ -49,7 +49,7 @@ const hydrate = async () => {
   await i18next
     .use(initReactI18next) // Tell i18next to use the react-i18next plugin
     .use(LanguageDetector) // Setup a client-side language detector
-    .use(Backend) // Setup your backend
+    .use(Backend) // Setup fetch backend
     .init({
       ...i18n, // spread the configuration
       // This function detects the namespaces your routes rendered while SSR use

app/entry.server.tsx

@@ -9,7 +9,7 @@ import { CacheProvider } from '@emotion/react';
 import createEmotionServer from '@emotion/server/create-instance';
 import { createInstance } from 'i18next';
 import { I18nextProvider, initReactI18next } from 'react-i18next';
-import Backend from 'i18next-fs-backend';
+import Backend from './i18next-fetch-backend';
 import createEmotionCache from './src/createEmotionCache';
 import createTheme from './src/theme';
 import PageStyles from './src/PageStyles';

app/i18next-fetch-backend.ts

@@ -0,0 +1,20 @@
+import { BackendModule, ResourceKey } from 'i18next';
+
+const Backend: BackendModule = {
+  type: 'backend',
+  init: () => {},
+  read(language, namespace, callback) {
+    const loadLanguage = async () => {
+      const { default: resource }: { default: ResourceKey } = await import(
+        `./locales/${language}/${namespace}.json`
+      );
+      return resource;
+    };
+
+    loadLanguage()
+      .then(resource => callback(null, resource))
+      .catch((error: Error) => callback(error, null));
+  },
+};
+
+export default Backend;

app/i18next.server.ts

@@ -1,6 +1,6 @@
-import Backend from 'i18next-fs-backend';
 import { resolve } from 'node:path';
 import { RemixI18Next } from 'remix-i18next';
+import Backend from './i18next-fetch-backend';
 import i18n from './i18n';
 
 const publicDirectory = resolve(

i18next-parser.config.js

@@ -1,7 +1,7 @@
 export default {
   locales: ['en', 'it'],
   defaultNamespace: 'common',
-  output: 'public/locales/$LOCALE/$NAMESPACE.json',
+  output: 'app/locales/$LOCALE/$NAMESPACE.json',
   input: ['app/**/*.ts', 'app/**/*.tsx'],
   sort: true,
 };

package.json

@@ -16,7 +16,7 @@
     "dev:localstack": "docker compose up --force-recreate --build --renew-anon-volumes --remove-orphans",
     "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc",
-    "extract-locales": "i18next && prettier --write public/locales",
+    "extract-locales": "i18next && prettier --write app/locales",
     "upgrade-interactive": "ncu --interactive"
   },
   "dependencies": {
@@ -42,8 +42,6 @@
     "fuse.js": "^7.0.0",
     "i18next": "^23.7.16",
     "i18next-browser-languagedetector": "^7.2.0",
-    "i18next-fs-backend": "^2.3.1",
-    "i18next-http-backend": "^2.4.2",
     "material-ui-popup-state": "^5.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

yarn.lock

@@ -4465,15 +4465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-fetch@npm:4.0.0":
-  version: 4.0.0
-  resolution: "cross-fetch@npm:4.0.0"
-  dependencies:
-    node-fetch: "npm:^2.6.12"
-  checksum: e231a71926644ef122d334a3a4e73d9ba3ba4b480a8a277fb9badc434c1ba905b3d60c8034e18b348361a09afbec40ba9371036801ba2b675a7b84588f9f55d8
-  languageName: node
-  linkType: hard
-
 "cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
@@ -6148,22 +6139,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next-fs-backend@npm:^2.3.1":
-  version: 2.3.1
-  resolution: "i18next-fs-backend@npm:2.3.1"
-  checksum: ebabf882c3a295887b82dd15fb84414da5e4aca4a59246db618965fbdc2be585e7c4699c9bb280940c04487cd33a568d3a972f794c079def320f15482f2dc6ca
-  languageName: node
-  linkType: hard
-
-"i18next-http-backend@npm:^2.4.2":
-  version: 2.4.2
-  resolution: "i18next-http-backend@npm:2.4.2"
-  dependencies:
-    cross-fetch: "npm:4.0.0"
-  checksum: faf8297cebc1f700308ef30c33b308f0efb0fab036292c8cb74f9b806e1a75edec6ed41d288067525337f06c0ebd1df51c7298d1c2f50a2223560726ca1e61c3
-  languageName: node
-  linkType: hard
-
 "i18next-parser@npm:^8.12.0":
   version: 8.12.0
   resolution: "i18next-parser@npm:8.12.0"
@@ -6943,8 +6918,6 @@ __metadata:
     fuse.js: "npm:^7.0.0"
     i18next: "npm:^23.7.16"
     i18next-browser-languagedetector: "npm:^7.2.0"
-    i18next-fs-backend: "npm:^2.3.1"
-    i18next-http-backend: "npm:^2.4.2"
     i18next-parser: "npm:^8.12.0"
     material-ui-popup-state: "npm:^5.0.10"
     npm-check-updates: "npm:^16.14.12"
@@ -8049,20 +8022,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-fetch@npm:^2.6.12":
-  version: 2.7.0
-  resolution: "node-fetch@npm:2.7.0"
-  dependencies:
-    whatwg-url: "npm:^5.0.0"
-  peerDependencies:
-    encoding: ^0.1.0
-  peerDependenciesMeta:
-    encoding:
-      optional: true
-  checksum: b24f8a3dc937f388192e59bcf9d0857d7b6940a2496f328381641cb616efccc9866e89ec43f2ec956bbd6c3d3ee05524ce77fe7b29ccd34692b3a16f237d6676
-  languageName: node
-  linkType: hard
-
 "node-gyp@npm:^9.0.0":
   version: 9.4.1
   resolution: "node-gyp@npm:9.4.1"
@@ -10357,13 +10316,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tr46@npm:~0.0.3":
-  version: 0.0.3
-  resolution: "tr46@npm:0.0.3"
-  checksum: 8f1f5aa6cb232f9e1bdc86f485f916b7aa38caee8a778b378ffec0b70d9307873f253f5cbadbe2955ece2ac5c83d0dc14a77513166ccd0a0c7fe197e21396695
-  languageName: node
-  linkType: hard
-
 "tree-kill@npm:^1.2.2":
   version: 1.2.2
   resolution: "tree-kill@npm:1.2.2"
@@ -11016,23 +10968,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webidl-conversions@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "webidl-conversions@npm:3.0.1"
-  checksum: b65b9f8d6854572a84a5c69615152b63371395f0c5dcd6729c45789052296df54314db2bc3e977df41705eacb8bc79c247cee139a63fa695192f95816ed528ad
-  languageName: node
-  linkType: hard
-
-"whatwg-url@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "whatwg-url@npm:5.0.0"
-  dependencies:
-    tr46: "npm:~0.0.3"
-    webidl-conversions: "npm:^3.0.0"
-  checksum: f95adbc1e80820828b45cc671d97da7cd5e4ef9deb426c31bcd5ab00dc7103042291613b3ef3caec0a2335ed09e0d5ed026c940755dbb6d404e2b27f940fdf07
-  languageName: node
-  linkType: hard
-
 "which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.2":
   version: 1.1.13
   resolution: "which-typed-array@npm:1.1.13"