amannn / next-intl

🌐 Internationalization (i18n) for Next.js
https://next-intl-docs.vercel.app
MIT License
2.58k stars 236 forks source link

code: 'FORMATTING_ERROR', #1321

Closed swajp closed 2 months ago

swajp commented 2 months ago

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

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 commented 2 months ago

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 https://github.com/amannn/next-intl/issues/611).

swajp commented 2 months ago

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

amannn commented 2 months ago

Ok, good to hear!