M frontend/hooks/useTolgee.ts → frontend/hooks/useTolgee.ts

@@ -1,6 +1,7 @@ 
-import i18n from 'i18next';
 import {withTolgee, Tolgee, I18nextPlugin, DevTools} from '@tolgee/i18next';
 import useLocale from './useLocale';
+import {useTranslation} from 'next-i18next';
+import {useEffect} from 'react';
 
 const tolgee = Tolgee()
   .use(DevTools())
@@ -13,10 +14,23 @@ });
 
 const useTolgee = () => {
   const {locale} = useLocale();
-  return withTolgee(i18n, tolgee).init({
-    lng: locale,
-    fallbackLng: 'fr',
-  });
+  const {i18n} = useTranslation();
+
+  useEffect(() => {
+    const isChrome =
+      window.navigator.vendor?.startsWith('Google') ||
+      // @ts-expect-error
+      window.navigator.userAgentData?.brands.some(brand =>
+        brand.brand.startsWith('Chrom')
+      );
+    if (isChrome) {
+      console.info(`Chrome recognized. Load Tolgee.`);
+      withTolgee(i18n, tolgee).init({
+        lng: locale,
+        fallbackLng: 'en',
+      });
+    }
+  }, []);
 };
 
 export default useTolgee;

M frontend/pages/_app.tsx → frontend/pages/_app.tsx

@@ -5,7 +5,7 @@ import Head from 'next/head';
 import CssBaseline from '@mui/material/CssBaseline';
 import {ThemeProvider, Theme} from '@mui/material/styles';
 import {AppProps} from 'next/app';
-import {appWithTranslation} from 'next-i18next';
+import {appWithTranslation, useTranslation} from 'next-i18next';
 import {ApolloProvider} from '@apollo/client';
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
 import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
@@ -27,8 +27,8 @@ const App = function (props: AppProps) {
   const {Component, pageProps} = props;
   const apolloClient = useApollo(pageProps);
   const {locale} = useLocale();
-  useTolgee();
 
+  useTolgee();
   moment.locale(locale);
 
   useEffect(() => {