diff --git a/framework/core/js/src/common/Translator.tsx b/framework/core/js/src/common/Translator.tsx
index a0c97967c0..60cea4a59e 100644
--- a/framework/core/js/src/common/Translator.tsx
+++ b/framework/core/js/src/common/Translator.tsx
@@ -127,7 +127,10 @@ export default class Translator {
 
       this.translations[id] = translation;
 
-      const locale = this.formatter.rich({ id, default: id }, parameters);
+      let locale = this.formatter.rich({ id, default: id }, parameters);
+
+      // convert undefined args to {undefined}.
+      locale = locale instanceof Array ? locale.map((arg) => (arg === undefined ? '{undefined}' : arg)) : locale;
 
       if (extract) return extractText(locale);
 
diff --git a/framework/core/js/src/common/utils/extractText.ts b/framework/core/js/src/common/utils/extractText.ts
index e72cd13014..ac5bc3a48e 100644
--- a/framework/core/js/src/common/utils/extractText.ts
+++ b/framework/core/js/src/common/utils/extractText.ts
@@ -5,10 +5,7 @@ import type Mithril from 'mithril';
  */
 export default function extractText(vdom: Mithril.Children): string {
   if (vdom instanceof Array) {
-    return vdom
-      .filter((item) => item !== undefined)
-      .map((element) => extractText(element))
-      .join('');
+    return vdom.map((element) => extractText(element)).join('');
   } else if (typeof vdom === 'object' && vdom !== null) {
     return extractText(vdom.children);
   } else {
diff --git a/framework/core/js/tests/unit/common/utils/Translator.test.ts b/framework/core/js/tests/unit/common/utils/Translator.test.ts
index b469579d97..735971a6b1 100644
--- a/framework/core/js/tests/unit/common/utils/Translator.test.ts
+++ b/framework/core/js/tests/unit/common/utils/Translator.test.ts
@@ -17,13 +17,23 @@ test('placeholders encoding', () => {
   expect(extractText(translator.trans('test1', { placeholder: translator.trans('test2', { placeholder: "'" }) }))).toBe("test1 test2 ' test2 test1");
 });
 
+// This is how the backend translator behaves. The only discrepancy with the frontend translator.
+// test('missing placeholders', () => {
+//   const translator = new Translator();
+//   translator.addTranslations({
+//     test1: 'test1 {placeholder} test1',
+//   });
+//
+//   expect(extractText(translator.trans('test1', {}))).toBe('test1 {placeholder} test1');
+// });
+
 test('missing placeholders', () => {
   const translator = new Translator();
   translator.addTranslations({
     test1: 'test1 {placeholder} test1',
   });
 
-  expect(extractText(translator.trans('test1', {}))).toBe('test1 {placeholder} test1');
+  expect(extractText(translator.trans('test1', {}))).toBe('test1 {undefined} test1');
 });
 
 test('escaped placeholders', () => {