Payload CMS UI fields with i18n, does not accept translate function

Payload CMS UI fields with i18n, does not accept translate function

I am trying to add payloadcms/translations from payload to my cms written with payload cms and next,

    "@payloadcms/translations": "^3.42.0",
    "@payloadcms/ui": "^v3.42.0",

I have my fields like this :

{
      name: 'color',
      type: 'text',
      label: translate('machines:color'),
    },
    {
      // ui fields do not accept functions as labels
      name: 'Status',
      type: 'ui',
      label: translate('customMachines:color'),
      admin: {
        components: {
          Cell: '/appViews/views/Status.tsx#Status',
        },
      },
    },

the error I am getting is :

Type '({ t: defaultT }: { t: TFunction; }) => string' is not assignable to type 'string | Record<string, string> | undefined'.ts(2322)

seems it can not handle my translate fn that get the string value from the custom translations object. Seems the documentation does not specify this scenario. https://payloadcms.com/docs/configuration/i18n and I am not sure how to handle it at the moment.

is there a way to add translations to the UI fields on payload cms?

Answer

translate() function at config time, use a static i18n object for label

label: {
  en: 'Color',
  de: 'Farbe',
  fr: 'Couleur',
}

Enjoyed this question?

Check out more content on our blog or follow us on social media.

Browse more questions