Twig error using {{content.field_name.0 |t}}

I ran into this error when trying to translate as much as possible via .po files, by exposing strings as translatable Twig elements. But suffix wasn't translatable in a Bootstrap5 based theme (bootstrap5/templates/form/form-element.html.twig):

With <span class="field-suffix">{{ suffix|trans }}</span> I got:

The website encountered an unexpected error. Try again later.
InvalidArgumentException: $string (" kr. per m²") must be a string. in Drupal\Core\StringTranslation\TranslatableMarkup->__construct() (line 132 of core/lib/Drupal/Core/StringTranslation/TranslatableMarkup.php). t() (Line: 100) __TwigTemplate_d423ca3a82915c4d447ecaf81034

On the other hand, this works fine for Block titles (bootstrap5/templates/block/block.html.twig) and Field names (bootstrap5/templates/field/field.html.twig):

Blocks:
<h2{{ title_attributes }}>{{ label|trans }}</h2>

Fields:
<div{{ title_attributes.addClass(title_classes) }}>{{ label|trans }}</div>

I just remembered the two Twig contrib modules, and there was a solution for separating a field's content, suffix and prefix values.

I got it to work for field labels as well, by rendering the title value in /claro/templates/form-element-label.html.twig twice, before translating it:

<label{{ attributes.addClass(classes) }}>{{ title|render|render|trans }}</label>

This trick is also mentioned on the doc page:

You may have to render an item before you filter it:
{{ item|render|filter }}

https://www.drupal.org/docs/develop/theming-drupal/twig-in-drupal/filter... →