diff --git a/packages/js/src/helpers/i18n.js b/packages/js/src/helpers/i18n.js index cba8b47ef57..74dbb5e57f7 100644 --- a/packages/js/src/helpers/i18n.js +++ b/packages/js/src/helpers/i18n.js @@ -1,4 +1,5 @@ import { setLocaleData } from "@wordpress/i18n"; +import { createInterpolateElement } from "@wordpress/element"; import { get } from "lodash"; /** @@ -26,3 +27,19 @@ export function setTextdomainL10n( textdomain, l10nNamespace = "wpseoYoastJSL10n setLocaleData( translations, textdomain ); } } + +/** + * Wrapper function for `createInterpolateElement` to catch errors. + * + * @param {string} interpolatedString The interpolated string. + * @param {object} conversionMap The conversion map object. + * @returns {string} The interpolated string. + */ +export const safeCreateInterpolateElement = ( interpolatedString, conversionMap ) => { + try { + return createInterpolateElement( interpolatedString, conversionMap ); + } catch ( error ) { + console.error( "Error in translation for:", interpolatedString, error ); + return interpolatedString; + } +}; diff --git a/packages/js/src/settings/routes/site-basics.js b/packages/js/src/settings/routes/site-basics.js index 75d723e5bcc..36c02d66351 100644 --- a/packages/js/src/settings/routes/site-basics.js +++ b/packages/js/src/settings/routes/site-basics.js @@ -15,6 +15,7 @@ import { } from "../components"; import { withDisabledMessageSupport, withFormikDummySelectField } from "../hocs"; import { useDispatchSettings, useSelectSettings } from "../hooks"; +import { safeCreateInterpolateElement } from "../../helpers/i18n"; const ToggleFieldWithDisabledMessageSupport = withDisabledMessageSupport( ToggleField ); const FormikSelectPageWithDummy = withFormikDummySelectField( FormikPageSelectField ); @@ -104,7 +105,7 @@ const SiteBasics = () => { strong: , } ), [] ); - const taglineDescription = useMemo( () => createInterpolateElement( + const taglineDescription = useMemo( () => safeCreateInterpolateElement( sprintf( /** * translators: %1$s expands to an opening anchor tag.