fix: ensure i18next initialization in client components to prevent translation keys from showing in Vercel builds

Author: zzq0826

src/components/Footer/PureFooter/PureFooter.tsx

@@ -1,9 +1,11 @@
-import { useState, useEffect } from "preact/hooks"
 import { aboutList, mediaList, resourceList } from "../helper.tsx"
 import styles from "./PureFooter.module.css"
 import { t } from "i18next"
+import { useI18n } from "~/hooks/useI18n"
 
 const Footer = () => {
+  // Use the hook to ensure i18next is initialized
+  useI18n()
   return (
     <div className={styles.footerLayout}>
       <a className={styles.logo} href="/">

src/components/Footer/Subscribe/EmailInput.tsx

@@ -3,8 +3,11 @@ import styles from "./EmailInput.module.css"
 import ArrowSvg from "~/assets/svgs/footer/arrow-right.svg?react"
 import { clsx } from "~/lib"
 import { t } from "i18next"
+import { useI18n } from "~/hooks/useI18nReact"
 
 const EmailInput = (props) => {
+  // Use the hook to ensure i18next is initialized
+  useI18n()
   const { end, onClick, onEnter, ...restProps } = props
 
   const handleEnter = (e) => {

src/components/Footer/Subscribe/Subscribe.tsx

@@ -3,9 +3,8 @@ import { useState, useEffect } from "preact/hooks"
 import MailchimpSubscribe from "react-mailchimp-subscribe"
 import SubscribeSvg from "~/assets/svgs/footer/subscribe.svg?react"
 import { clsx } from "~/lib"
-import i18next, { changeLanguage, t } from "i18next"
-
-
+import { t } from "i18next"
+import { useI18n } from "~/hooks/useI18n"
 import EmailInput from "./EmailInput.tsx"
 import styles from "./Subscribe.module.css"
 
@@ -20,8 +19,8 @@ export default function Subscribe(props) {
   const [email, setEmail] = useState("")
   const [customMessage, setCustomMessage] = useState("")
   const [emailValid, setEmailValid] = useState(false)
-
-  i18next.changeLanguage(props.lang)
+  // Use the hook to ensure i18next is initialized and handle language changes
+  useI18n(props.lang)
 
   useEffect(() => {
     setCustomMessage("")
@@ -51,22 +50,28 @@ export default function Subscribe(props) {
         </span>
 
         <div className={styles.copyBox}>
-          <div className={styles.subscribeTitle}>{ t("landing.NewsletterCTA.title") }</div>
-          <div className={styles.subscribeText}>
-          { t("landing.NewsletterCTA.text") }
-          </div>
+          <div className={styles.subscribeTitle}>{t("landing.NewsletterCTA.title")}</div>
+          <div className={styles.subscribeText}>{t("landing.NewsletterCTA.text")}</div>
         </div>
         <MailchimpSubscribe
           url={url}
-          render={({ subscribe, status, message }: any) => (
+          render={({
+            subscribe,
+            status,
+            message,
+          }: {
+            subscribe: (data: { EMAIL: string }) => void
+            status: string
+            message: string
+          }) => (
             <div className={styles.emailBox}>
               <EmailInput
                 className={styles.emailInput}
                 value={email}
                 onChange={handleChangeEmail}
                 onClick={() => handleSubmit(subscribe)}
                 onEnter={() => handleSubmit(subscribe)}
-                placeholder= { t("landing.NewsletterCTA.placeholder") }
+                placeholder={t("landing.NewsletterCTA.placeholder")}
                 end={status === "success"}
               />
               {customMessage && <div className={styles.errorMessage}>{customMessage}</div>}

src/components/RightSidebar/TableOfContents/index.tsx

@@ -3,7 +3,8 @@ import { useStore } from "@nanostores/preact"
 import type { FunctionalComponent } from "preact"
 import { useState, useEffect, useRef } from "preact/hooks"
 import { shouldUpdateToc } from "./tocStore"
-import i18next, { t } from "i18next"
+import { t } from "i18next"
+import { useI18n } from "~/hooks/useI18n"
 
 export interface Heading {
   depth: number
@@ -15,6 +16,8 @@ const TableOfContents: FunctionalComponent<{
   headers: Heading[]
   clientSideToc: boolean
 }> = ({ headers = [], clientSideToc = false }) => {
+  // Use the hook to ensure i18next is initialized
+  useI18n()
   // headers = [...headers].filter(({ depth }) => depth > 1 && depth < 4)
   const [headings, setHeadings] = useState([...headers].filter(({ depth }) => depth > 1 && depth < 4))
   const tableOfContents = useRef<HTMLUListElement>()

src/features/landing/components/SearchCTA.tsx

@@ -1,9 +1,12 @@
 import React, { useState, useCallback } from "react"
-import i18next, { t } from "i18next"
+import { t } from "i18next"
+import { useI18n } from "~/hooks/useI18nReact"
 import "./Search.css"
 
 import { SearchModal } from "~/components/Header/Search/SearchModal"
 export function SearchCTA() {
+  // Use the hook to ensure i18next is initialized
+  useI18n()
   const [isOpen, setIsOpen] = useState(false)
 
   const onOpen = useCallback(() => {

src/hooks/useI18n.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "preact/hooks"
+import i18next, { changeLanguage } from "i18next"
+
+/**
+ * Custom hook to ensure i18next is initialized and handle language changes
+ * This fixes the issue where Vercel build shows translation keys instead of translated text
+ * due to SSR/CSR timing differences
+ *
+ * @param lang - The language code to use (optional, defaults to current i18next language)
+ * @returns The current language code
+ */
+export function useI18n(lang?: string): string {
+  const [currentLang, setCurrentLang] = useState(i18next.language || "en")
+
+  useEffect(() => {
+    const updateLanguage = async () => {
+      if (lang && i18next.language !== lang) {
+        try {
+          await changeLanguage(lang)
+          setCurrentLang(lang)
+        } catch (error) {
+          // Silently handle any errors during language change
+          setCurrentLang(i18next.language)
+        }
+      } else {
+        setCurrentLang(i18next.language)
+      }
+    }
+
+    // Wait for i18next to be initialized before changing language
+    if (i18next.isInitialized) {
+      updateLanguage()
+    } else {
+      // Listen for initialization event
+      const handleInitialized = () => {
+        updateLanguage()
+        i18next.off("initialized", handleInitialized)
+      }
+      i18next.on("initialized", handleInitialized)
+
+      return () => {
+        i18next.off("initialized", handleInitialized)
+      }
+    }
+  }, [lang])
+
+  // Listen for language changes to trigger re-render
+  useEffect(() => {
+    const handleLanguageChanged = (lng: string) => {
+      setCurrentLang(lng)
+    }
+    i18next.on("languageChanged", handleLanguageChanged)
+
+    return () => {
+      i18next.off("languageChanged", handleLanguageChanged)
+    }
+  }, [])
+
+  return currentLang
+}

src/hooks/useI18nReact.ts

@@ -0,0 +1,60 @@
+import { useState, useEffect } from "react"
+import i18next, { changeLanguage } from "i18next"
+
+/**
+ * Custom hook for React components to ensure i18next is initialized and handle language changes
+ * This fixes the issue where Vercel build shows translation keys instead of translated text
+ * due to SSR/CSR timing differences
+ *
+ * @param lang - The language code to use (optional, defaults to current i18next language)
+ * @returns The current language code
+ */
+export function useI18n(lang?: string): string {
+  const [currentLang, setCurrentLang] = useState(i18next.language || "en")
+
+  useEffect(() => {
+    const updateLanguage = async () => {
+      if (lang && i18next.language !== lang) {
+        try {
+          await changeLanguage(lang)
+          setCurrentLang(lang)
+        } catch (error) {
+          // Silently handle any errors during language change
+          setCurrentLang(i18next.language)
+        }
+      } else {
+        setCurrentLang(i18next.language)
+      }
+    }
+
+    // Wait for i18next to be initialized before changing language
+    if (i18next.isInitialized) {
+      updateLanguage()
+    } else {
+      // Listen for initialization event
+      const handleInitialized = () => {
+        updateLanguage()
+        i18next.off("initialized", handleInitialized)
+      }
+      i18next.on("initialized", handleInitialized)
+
+      return () => {
+        i18next.off("initialized", handleInitialized)
+      }
+    }
+  }, [lang])
+
+  // Listen for language changes to trigger re-render
+  useEffect(() => {
+    const handleLanguageChanged = (lng: string) => {
+      setCurrentLang(lng)
+    }
+    i18next.on("languageChanged", handleLanguageChanged)
+
+    return () => {
+      i18next.off("languageChanged", handleLanguageChanged)
+    }
+  }, [])
+
+  return currentLang
+}