Next-intl: Error: INVALID_MESSAGE: MALFORMED_ARGUMENT (Show details for {{type}})

I'm working on a NextJS (Typescript) project with Next-intl. I have strings in JSON file and everything works well, unless I use arguments.

I use it in 'use client'; component:

import { useTranslations } from "next-intl";
//...
const t = useTranslations();
//...
{t('app.common.add' as never, {
    type: t('app.categories.metadata.subcategory' as never)
})}

Translations:

{
    "app": {
        "common": {
            "add": "Add {{type}}"
         }
    }
}

I'm struggling with NextJS giving me tons of Error: INVALID_MESSAGE: MALFORMED_ARGUMENT (Show details for {{type}}) errors in console and no translations for the fields.

I've consulted with LLMs, looked for bugs in Intl or NextJS, but couldn't find any solution. Do you have idea how to resolve the errors and get a working translation?

There is a syntax error. It's supposed to have only one pair of curlys:

- "Add {{type}}"
+ "Add {type}"

If you want to keep the curlys and have a dynamic value we gonna need to use rich text:

// definition
"add": "Add <type></type>",

// usage
{t('add', { type: (v) => `${v} {${t('subcategory')}}` })}