improve vite example

felixmosh · Dec 16, 2024 · a1fd4b2 · a1fd4b2
1 parent 7b18af2
commit a1fd4b2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 31 deletions.
diff --git a/examples/vite-react-i18next/package.json b/examples/vite-react-i18next/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "i18next": "^23.5.1",
     "i18next-browser-languagedetector": "^7.1.0",
-    "i18next-hmr": "^3.0.0",
+    "i18next-hmr": "^3.1.3",
     "i18next-http-backend": "^2.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/examples/vite-react-i18next/src/i18n.js b/examples/vite-react-i18next/src/i18n.js
@@ -2,28 +2,31 @@ import i18n from 'i18next';
 import Backend from 'i18next-http-backend';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
-import { HMRPlugin } from 'i18next-hmr/plugin';
 
-const instance = i18n
-  // load translation using http -> see /public/locales
-  // learn more: https://github.com/i18next/i18next-http-backend
-  .use(Backend)
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  .use(LanguageDetector)
-  // pass the i18n instance to react-i18next.
-  .use(initReactI18next);
+export async function init() {
+  const instance = i18n
+    // load translation using http -> see /public/locales
+    // learn more: https://github.com/i18next/i18next-http-backend
+    .use(Backend)
+    // detect user language
+    // learn more: https://github.com/i18next/i18next-browser-languageDetector
+    .use(LanguageDetector)
+    // pass the i18n instance to react-i18next.
+    .use(initReactI18next);
 
-if (import.meta.env.MODE !== 'production') {
-  instance.use(new HMRPlugin({ vite: { client: true } }));
-}
+  if (import.meta.env.MODE !== 'production') {
+    const { HMRPlugin } = await import('i18next-hmr/plugin');
+
+    instance.use(new HMRPlugin({ vite: { client: true } }));
+  }
 
-instance.init({
-  fallbackLng: 'en',
+  await instance.init({
+    fallbackLng: 'en',
 
-  interpolation: {
-    escapeValue: false, // not needed for react as it escapes by default
-  },
-});
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  });
 
-export default i18n;
+  return instance;
+}
diff --git a/examples/vite-react-i18next/src/main.jsx b/examples/vite-react-i18next/src/main.jsx
@@ -2,10 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
 import './index.css';
-import './i18n.js';
+import { init } from './i18n.js';
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+init().then(() => {
+  ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+});
diff --git a/examples/vite-react-i18next/yarn.lock b/examples/vite-react-i18next/yarn.lock
@@ -1250,10 +1250,10 @@ i18next-browser-languagedetector@^7.1.0:
   dependencies:
     "@babel/runtime" "^7.19.4"
 
-i18next-hmr@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/i18next-hmr/-/i18next-hmr-3.0.0.tgz#3637e305892b55b4226bb58fbfa5870fe60c1a7d"
-  integrity sha512-Ca8RR7OqdrrR+nrOk3W/fkWRVOznRsnYE3oHFquxGRWPuxe+zuSeAc5Blo5qdpNM8ub9hth8Vs4GukEVd+YAIA==
+i18next-hmr@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/i18next-hmr/-/i18next-hmr-3.1.3.tgz#5073673849412b2b4e7d34adeb97e42898e30ade"
+  integrity sha512-zoM4B6toVk48rAMl0t9eV+ldEq9HIO9+bek8H1aGSLQZAjPSBQCUggkxdk0vQjEWSKLsssxZqZBAWS+Ow1rcsA==
 
 i18next-http-backend@^2.2.2:
   version "2.2.2"