From e237f9f222d684b0da0296c033c7294dee5b8d2b Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 16 Feb 2022 22:31:12 +0800
Subject: [PATCH] Prevent literal interpolation on null translations & apply to
 collection translations (#11482)

* translation could be null in edge cases

* add interpolation to collection translations
---
 app/src/stores/collections.ts | 4 +++-
 app/src/stores/fields.ts      | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/src/stores/collections.ts b/app/src/stores/collections.ts
index e635ffe98b..ed1aa11ee1 100644
--- a/app/src/stores/collections.ts
+++ b/app/src/stores/collections.ts
@@ -54,9 +54,11 @@ export const useCollectionsStore = defineStore({
 				for (let i = 0; i < collection.meta.translations.length; i++) {
 					const { language, translation, singular, plural } = collection.meta.translations[i];
 
+					const literalInterpolatedTranslation = translation ? translation.replace(/([{}@$|])/g, "{'$1'}") : '';
+
 					i18n.global.mergeLocaleMessage(language, {
 						collection_names: {
-							[collection.collection]: translation,
+							[collection.collection]: literalInterpolatedTranslation,
 						},
 						collection_names_singular: {
 							[collection.collection]: singular,
diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index 372e09ae39..a1e439b274 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -76,7 +76,7 @@ export const useFieldsStore = defineStore({
 					const { language, translation } = field.meta.translations[i];
 
 					// Interpolate special characters in vue-i18n to prevent parsing error. Ref #11287
-					const literalInterpolatedTranslation = translation.replace(/([{}@$|])/g, "{'$1'}");
+					const literalInterpolatedTranslation = translation ? translation.replace(/([{}@$|])/g, "{'$1'}") : '';
 
 					i18n.global.mergeLocaleMessage(language, {
 						fields: {