@salesforce/retail-react-app 1.1.0-dev.1 → 1.1.0-dev.2

package/app/components/_app/index.jsx

@@ -143,10 +143,23 @@ const App = (props) => {
         l10nConfig: site.l10n
     })
 
+    // If the translation file exists, it'll be served directly from static folder (and won't reach this code here).
+    // However, if the file is missing, the App would render a 404 page.
+    const is404ForMissingTranslationFile = /\/static\/translations\/compiled\/[^.]+\.json$/.test(
+        location?.pathname
+    )
+
     // Fetch the translation message data using the target locale.
     const {data: messages} = useQuery({
-        queryKey: ['app', 'translationas', 'messages', targetLocale],
-        queryFn: () => fetchTranslations(targetLocale),
+        queryKey: ['app', 'translations', 'messages', targetLocale],
+        queryFn: () => {
+            if (is404ForMissingTranslationFile) {
+                // Return early to prevent an infinite loop
+                // Otherwise, it'll continue to fetch the missing translation file again
+                return {}
+            }
+            return fetchTranslations(targetLocale)
+        },
         enabled: isServer
     })
 

package/app/utils/locale.js

@@ -40,7 +40,7 @@ export const fetchTranslations = async (locale) => {
     } catch (err) {
         console.error(err)
         console.log(
-            'Loading empty messages, so that react-intl would fall back to the inline default messages'
+            'Translation not found. Loading empty messages, so that react-intl would fall back to the inline default messages'
         )
         return {}
     }

package/app/utils/locale.test.js

@@ -72,6 +72,7 @@ describe('determineTargetLocale', () => {
 })
 
 describe('fetchTranslations', () => {
+    // The following two tests expect the compiled translation files in app/static/translations/compiled to exist
     test('loading the target locale', async () => {
         const messages = await fetchTranslations(supportedLocale)
         expect(messages[testId2]).toBeDefined()
@@ -126,6 +127,7 @@ describe('getTargetLocale', () => {
         windowSpy.mockImplementation(() => undefined)
 
         const targetLocale = getTargetLocale({l10nConfig})
+        // We expect the compiled translation file in app/static/translations/compiled/en-XA to exist
         const messages = await fetchTranslations(targetLocale)
         // The app should still think its target locale is the default one
         expect(targetLocale).toBe(DEFAULT_LOCALE)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/retail-react-app",
-  "version": "1.1.0-dev.1",
+  "version": "1.1.0-dev.2",
   "license": "See license in LICENSE",
   "author": "cc-pwa-kit@salesforce.com",
   "ccExtensibility": {
@@ -45,10 +45,10 @@
     "@lhci/cli": "^0.11.0",
     "@loadable/component": "^5.15.3",
     "@peculiar/webcrypto": "^1.4.2",
-    "@salesforce/commerce-sdk-react": "1.1.0-dev.1",
-    "@salesforce/pwa-kit-dev": "3.1.0-preview.2",
-    "@salesforce/pwa-kit-react-sdk": "3.1.0-preview.2",
-    "@salesforce/pwa-kit-runtime": "3.1.0-preview.2",
+    "@salesforce/commerce-sdk-react": "1.1.0-dev.2",
+    "@salesforce/pwa-kit-dev": "3.1.0-preview.3",
+    "@salesforce/pwa-kit-react-sdk": "3.1.0-preview.3",
+    "@salesforce/pwa-kit-runtime": "3.1.0-preview.3",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.29.1",
     "@testing-library/dom": "^9.0.1",
@@ -103,5 +103,5 @@
   "overrides": {
     "nwsapi": "2.2.2"
   },
-  "gitHead": "3492171017c426688e11ae4c0d725d272e71ed0d"
+  "gitHead": "3840c85ad3a5526ff6a54eb0bf65327d3aa72797"
 }