Closed cbratschi closed 10 months ago
I guess Payload expects a string and does not support translations.
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.
Hi @cbratschi, I could not reproduce this with a new project - can you provide a basic reproduction?
@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.
@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!
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'],
@cbratschi want to share what the languages
variable looks like?
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'
}
}
];
The label value must be the issue. It gets passed to React as is without filtering the active language.
@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.
This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.
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