Revisions not working: getting React error

[cbratschi]

Link to reproduction

private repo

Describe the Bug

Opening the revisions page produces a React error in any collection with revisions activated.

Example:

http://localhost:3000/admin/globals/site/versions/6568de9ae04b3fc4b44c739c

React error:

Objects are not valid as a React child (found: object with keys {de, en, fr, it}). If you meant to render a collection of children, use an array instead.

From the error message an object with translation data is added to the JSX tree. After that the SPA is broken i.e. back navigation fails. We can reproduce it on our development and production systems. We tried to get more details but the React developer tools show no info in this case.

To Reproduce

Open revisions detail page. Getting blank screen with error in JavaScript console.

Payload Version

2.3.1

Adapters and Plugins

db-mongodb, bundler-webpack, live-preview

[cbratschi]

I guess Payload expects a string and does not support translations.

[cbratschi]

Full stack trace:

main.aa84253b4ab011b8cd39.js:63 Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bde%2C%20en%2C%20fr%2C%20it%7D for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at aJ (main.aa84253b4ab011b8cd39.js:63:54264)
    at l (main.aa84253b4ab011b8cd39.js:63:59257)
    at il (main.aa84253b4ab011b8cd39.js:63:71124)
    at u (main.aa84253b4ab011b8cd39.js:63:121237)
    at lR (main.aa84253b4ab011b8cd39.js:63:99083)
    at main.aa84253b4ab011b8cd39.js:63:98950
    at lz (main.aa84253b4ab011b8cd39.js:63:98957)
    at lO (main.aa84253b4ab011b8cd39.js:63:95709)
    at lS (main.aa84253b4ab011b8cd39.js:63:96098)
    at r3 (main.aa84253b4ab011b8cd39.js:63:44823)

I tried to find the component but it's hard to find any details in the minified code.

[JessChowdhury]

Hi @cbratschi, I could not reproduce this with a new project - can you provide a basic reproduction?

[cbratschi]

@JessChowdhury it's part of a large company project. Is there a way to activate the React debug mode? This would allow us to check which component is failing.

I will try to deactivate some translated texts. Probably once it will run without error.

[JarrodMFlesch]

@cbratschi it would be great if you could follow the issue guide. That would allow us (and you) to pinpoint what is causing the issue for you. It is recommended that you try to isolate your issue when creating a reproduction. This means adding as few fields as possible to the reproduction when attempting to recreate the issue. Thanks!

[cbratschi]

Found the root cause: in Payload config I am using:

    //i18n
    localization: {
        defaultLocale: defaultLanguage,

        locales: languages.map(item => {
            return {
                code: item.lang,
                label: item.labels
            };
        }),

        fallback: true
    },

It works as soon as localization.locales is a string array:

locales: ['de', 'en'],

[JarrodMFlesch]

@cbratschi want to share what the languages variable looks like?

[cbratschi]

Sure:

export const languages: Language[] = [
    {
        'name': 'German',
        'lang': 'de',
        'locale': 'de_CH',
        'labels': {
            'de': 'Deutsch',
            'en': 'German',
            'fr': 'Allemand',
            'it': 'Tedesco'
        }
    },
    {
        'name': 'English',
        'lang': 'en',
        'locale': 'en_US',
        'labels': {
            'de': 'Englisch',
            'en': 'English',
            'fr': 'Anglais',
            'it': 'Inglese'
        }
    },
    {
        'name': 'French',
        'lang': 'fr',
        'locale': 'fr_CH',
        'labels': {
            'de': 'Französisch',
            'en': 'French',
            'fr': 'Français',
            'it': 'Francese'
        }
    },
    {
        'name': 'Italian',
        'lang': 'it',
        'locale': 'it_CH',
        'labels': {
            'de': 'Italienisch',
            'en': 'Italian',
            'fr': 'Italien',
            'it': 'Italiano'
        }
    }
];

[cbratschi]

The label value must be the issue. It gets passed to React as is without filtering the active language.

[PatrikKozak]

@JessChowdhury - I created a separate issue for this before I knew this one had existed. Going to add my findings here and close the other one.

Error occurs when defining locales in your payload config like the following:

locales: [
  {
    label: {
      es: 'Español',
      en: 'Spanish',
    },
    code: 'es',
  },
  {
    label: {
      es: 'Inglés',
      en: 'English',
    },
    code: 'en',
  },
],

When doing so, the version view for version enabled collections / globals breaks with the following console errors:

This issue stems from this merged PR

To reproduce:

The admin payload test suite has locales defined like this in the payload.config already:

locales: [
  {
    label: {
      es: 'Español',
      en: 'Spanish',
    },
    code: 'es',
  },
  {
    label: {
      es: 'Inglés',
      en: 'English',
    },
    code: 'en',
  },
],

Run pnpm dev admin

Go to version enabled collection --> Versions view --> click into specific version --> breaks.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.