⚡ Attempt to fix tolgee random crash due to provider not detected

apps/builder/package.json

@@ -31,8 +31,8 @@
     "@sentry/nextjs": "7.77.0",
     "@tanstack/react-query": "4.29.19",
     "@tanstack/react-table": "8.9.3",
-    "@tolgee/format-icu": "5.13.3",
-    "@tolgee/react": "5.13.3",
+    "@tolgee/format-icu": "5.19.0",
+    "@tolgee/react": "5.19.0",
     "@trpc/client": "10.40.0",
     "@trpc/next": "10.40.0",
     "@trpc/react-query": "10.40.0",

apps/builder/src/lib/tolgee.tsx

@@ -1,12 +1,12 @@
 import { DevTools, Tolgee } from '@tolgee/react'
 import { FormatIcu } from '@tolgee/format-icu'
-import en from '../../public/locales/en.json'
-import fr from '../../public/locales/fr.json'
-import de from '../../public/locales/de.json'
-import pt from '../../public/locales/pt.json'
-import ptBR from '../../public/locales/pt-BR.json'
-import es from '../../public/locales/es.json'
-import ro from '../../public/locales/ro.json'
+import en from '../i18n/en.json'
+import fr from '../i18n/fr.json'
+import de from '../i18n/de.json'
+import pt from '../i18n/pt.json'
+import ptBR from '../i18n/pt-BR.json'
+import es from '../i18n/es.json'
+import ro from '../i18n/ro.json'
 import { env } from '@typebot.io/env'
 
 export const tolgee = Tolgee()

apps/builder/src/pages/_app.tsx

@@ -28,32 +28,36 @@ initPostHogIfEnabled()
 const { ToastContainer, toast } = createStandaloneToast(customTheme)
 
 const App = ({ Component, pageProps }: AppProps) => {
+  const router = useRouter()
+  const ssrTolgee = useTolgeeSSR(tolgee, router.locale)
+
   useRouterProgressBar()
-  const { query, pathname, locale } = useRouter()
-  const ssrTolgee = useTolgeeSSR(tolgee, locale)
 
   useEffect(() => {
-    if (pathname.endsWith('/edit') || pathname.endsWith('/analytics')) {
+    if (
+      router.pathname.endsWith('/edit') ||
+      router.pathname.endsWith('/analytics')
+    ) {
       document.body.style.overflow = 'hidden'
       document.body.classList.add('disable-scroll-x-behavior')
     } else {
       document.body.style.overflow = 'auto'
       document.body.classList.remove('disable-scroll-x-behavior')
     }
-  }, [pathname])
+  }, [router.pathname])
 
   useEffect(() => {
-    const newPlan = query.stripe?.toString()
+    const newPlan = router.query.stripe?.toString()
     if (newPlan === Plan.STARTER || newPlan === Plan.PRO)
       toast({
         position: 'top-right',
         status: 'success',
         title: 'Upgrade success!',
         description: `Workspace upgraded to ${toTitleCase(newPlan)} 🎉`,
       })
-  }, [query.stripe])
+  }, [router.query.stripe])
 
-  const typebotId = query.typebotId?.toString()
+  const typebotId = router.query.typebotId?.toString()
 
   return (
     <>
@@ -65,9 +69,8 @@ const App = ({ Component, pageProps }: AppProps) => {
               <TypebotProvider typebotId={typebotId}>
                 <WorkspaceProvider typebotId={typebotId}>
                   <Component {...pageProps} />
-                  {!pathname.endsWith('edit') && isCloudProdInstance() && (
-                    <SupportBubble />
-                  )}
+                  {!router.pathname.endsWith('edit') &&
+                    isCloudProdInstance() && <SupportBubble />}
                   <NewVersionPopup />
                 </WorkspaceProvider>
               </TypebotProvider>