feat: warn on missing translations instead of errors in the dev mode

Author: AleksandrSl

cmp/compiler/src/plugin/dev-server-loader.ts

@@ -17,11 +17,14 @@ export default async function devServerLoader(
   logger.debug("Running devServerLoader");
   const callback = this.async();
   const isDev = process.env.NODE_ENV === "development";
+  if (!isDev) {
+    return;
+  }
 
   const config: LingoConfig = this.getOptions();
   const startPort = config.dev.serverStartPort;
 
-  if (isDev && !serverPromise) {
+  if (!serverPromise) {
     serverPromise = startOrGetTranslationServer({
       startPort,
       onError: (err) => {
@@ -36,7 +39,7 @@ export default async function devServerLoader(
 
   // Wait for server with timeout to prevent compilation from hanging
   const server = await withTimeout(
-    serverPromise!,
+    serverPromise,
     DEFAULT_TIMEOUTS.SERVER_START,
     "Translation server startup",
   );

cmp/compiler/src/react/server-only/translations.ts

@@ -12,7 +12,7 @@ import { readFile } from "fs/promises";
 import { join } from "path";
 import { logger } from "../../utils/logger";
 import { fetchTranslations as fetchFromDevServer } from "../shared/utils";
-import { serverUrl, cacheDir } from "@lingo.dev/compiler/dev-config";
+import { cacheDir, serverUrl } from "@lingo.dev/compiler/dev-config";
 
 /**
  * Configuration for translation fetching
@@ -112,7 +112,14 @@ export async function fetchTranslationsOnServer(
     logger.debug(
       `Server. Fetching translations for ${locale} and ${hashes.join(", ")} from dev server (${serverUrl})`,
     );
-    return await fetchFromDevServer(locale, hashes, serverUrl);
+    try {
+      return await fetchFromDevServer(locale, hashes, serverUrl);
+    } catch (error) {
+      logger.warn(
+        `Failed to fetch translations from translation server: ${error}.`,
+      );
+      return {};
+    }
   }
 
   logger.debug(`Reading translations for ${locale} from filesystem`);

cmp/compiler/src/react/shared/TranslationContext.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-// TODO (AleksandrSl 21/11/2025): I think there should be a better type
-import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import {
   createContext,
   type ReactNode,
@@ -105,7 +103,7 @@ export interface TranslationProviderProps {
    * If provided, calls router.refresh() after locale change
    * This ensures Server Components re-render with new locale
    */
-  router?: AppRouterInstance;
+  router?: { refresh: () => void };
 
   /**
    * Development widget configuration
@@ -303,16 +301,10 @@ function TranslationProvider__Dev({
     useState<Record<string, string>>(initialTranslations);
   const [isLoading, setIsLoading] = useState(false);
 
-  // Track registered hashes from components (updated every render)
-  const registeredHashesRef = useRef<Set<string>>(new Set());
-
-  // Track all hashes that have been seen (for hot reload detection)
   const [allSeenHashes, setAllSeenHashes] = useState<Set<string>>(new Set());
-
-  // Track which hashes are pending translation request
+  const registeredHashesRef = useRef<Set<string>>(new Set());
   const pendingHashesRef = useRef<Set<string>>(new Set());
-
-  // Batch timer reference
+  const erroredHashesRef = useRef<Set<string>>(new Set());
   const batchTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   // Use ref to track translations to avoid stale closures
@@ -379,9 +371,12 @@ function TranslationProvider__Dev({
       [...allSeenHashes.values()],
       [...pendingHashesRef.current.values()],
     );
-    logger.debug("translationsRef.current: ", translations);
     for (const hash of allSeenHashes) {
-      if (!translations[hash] && !pendingHashesRef.current.has(hash)) {
+      if (
+        !translations[hash] &&
+        !pendingHashesRef.current.has(hash) &&
+        !erroredHashesRef.current.has(hash)
+      ) {
         missingHashes.push(hash);
         pendingHashesRef.current.add(hash);
       }
@@ -425,10 +420,13 @@ function TranslationProvider__Dev({
           registeredHashesRef.current.add(hash);
         }
       } catch (error) {
-        logger.error("Failed to fetch translations:", error);
+        logger.warn(
+          `Failed to fetch translations from translation server: ${error}.`,
+        );
         // Remove from pending so they can be retried
         for (const hash of hashesToFetch) {
           pendingHashesRef.current.delete(hash);
+          erroredHashesRef.current.add(hash);
         }
       } finally {
         setIsLoading(false);
@@ -470,6 +468,7 @@ function TranslationProvider__Dev({
       try {
         logger.info(`Fetching translations for locale: ${newLocale}`);
 
+        // TODO (AleksandrSl 08/12/2025): We should be fetching the existing cached translations here.
         const translatedDict = await fetchTranslations(
           newLocale,
           [],