code: 'FORMATTING_ERROR',

[swajp]

Description

Hi I cant do this

// en.json

        "parkingSize": "Parking lot size: <strong>{spaces}</strong> spaces",

// my-component.tsx

                        title={t.rich("parkingSize", { spaces: spaces })}

// request.tsx

   return {
        defaultTranslationValues: { strong: chunks => <strong>{chunks}</strong> },
        messages: (await import(`../../messages/${locale}.json`)).default
    }

error i am getting

  code: 'FORMATTING_ERROR',
  originalMessage: 'The intl string context variable "strong" was not provided to the string "per parking space/month with <strong>{spaces}</strong> parking spaces"'
}

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

.

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Click on …
3. See error: …

Expected behaviour

I expected for example: Parking lot size: 34 spaces

[amannn]

Without a reproduction it's a bit hard to give a definitive answer, but my guess is that your defaultTranslationValues are not available in Client Components (please refer to the corresponding docs).

This is definitely an area that needs some improvement in next-intl as it's too easy to get this wrong. Due to the limits of React Server Components, I'm currently investigating whether defaultTranslationValues should be deprecated (see full details and suggested alternatives in #611).

[swajp]

yep your guess was right It couldnt get the defaultTranslationValues on client component. React 👏

[amannn]

Ok, good to hear!