reactjsnext.js13i18nextpayload-cms

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?


Solution

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

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