fix: [internationalization] the translation object keys are visible f…

…or a brief time

apps/web/ni18n.config.ts

@@ -1,5 +1,21 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 const supportedLngs = ['en', 'fr', 'ar', 'bg', 'zh', 'nl', 'de', 'he', 'it', 'pl', 'pt', 'ru', 'es'];
-export const ni18nConfig = {
+
+i18n.use(initReactI18next).init({
+	lng: 'en',
+	fallbackLng: 'en',
+	ns: ['common'],
+	defaultNS: 'common',
 	supportedLngs,
-	ns: ['common']
-};
+	interpolation: {
+		escapeValue: false
+	}
+});
+
+supportedLngs.forEach((lang) => {
+	i18n.addResourceBundle(lang, 'common', require(`/public/locales/${lang}/common.json`));
+});
+
+export default i18n;

apps/web/pages/_app.tsx

@@ -11,12 +11,11 @@ import { ThemeProvider } from 'next-themes';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import Script from 'next/script';
-import { appWithI18Next } from 'ni18n';
+import { I18nextProvider } from 'react-i18next';
 import { SkeletonTheme } from 'react-loading-skeleton';
 import { RecoilRoot } from 'recoil';
 import { JitsuAnalytics } from '../lib/components/services/jitsu-analytics';
-import { ni18nConfig } from '../ni18n.config';
-
+import i18n from '../ni18n.config';
 const MyApp = ({ Component, pageProps }: AppProps) => {
 	const isJitsuEnvsPresent = jitsuConfiguration.host && jitsuConfiguration.writeKey;
 	return (
@@ -47,10 +46,12 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 				<RecoilRoot>
 					<ThemeProvider attribute="class">
 						<SkeletonTheme baseColor="#F0F0F0" enableAnimation={false}>
-							<AppState />
-							<JitsuAnalytics user={pageProps?.user} />
-							<ChatwootWidget />
-							<Component {...pageProps} />
+							<I18nextProvider i18n={i18n}>
+								<AppState />
+								<JitsuAnalytics user={pageProps?.user} />
+								<ChatwootWidget />
+								<Component {...pageProps} />
+							</I18nextProvider>
 						</SkeletonTheme>
 					</ThemeProvider>
 				</RecoilRoot>
@@ -59,4 +60,4 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 		</>
 	);
 };
-export default appWithI18Next(MyApp, ni18nConfig);
+export default MyApp;

yarn.lock

@@ -5095,7 +5095,7 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
-"@tanstack/[email protected]":
+"@tanstack/react-table@^8.10.7":
   version "8.10.7"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.10.7.tgz#733f4bee8cf5aa19582f944dd0fd3224b21e8c94"
   integrity sha512-bXhjA7xsTcsW8JPTTYlUg/FuBpn8MNjiEPhkNhIGCUR6iRQM2+WEco4OBpvDeVcR9SE+bmWLzdfiY7bCbCSVuA==