Hello again! I'm testing out collections for a project, and for some reason certain fields cause a crash and give these console errors. This has occurred on relationship, and select types which leads me to believe its an issue with the dropdown menu not rendering properly.
So far I've tried clearing the database, reinstalling my dependencies and overriding react and graphQL with the newest versions with no luck. Any suggestions on where to look?
@badjab326 whats your collection config? does it happen on all of them or just this one?
@badjab326 - could you share the exact field that is causing this issue? I have tried to replicate with a simple select field and a relationship field but not able to reproduce this error.
const Questions = {
slug: 'questions',
admin: {
defaultColumns: [
'question',
'label',
'description',
'answerType',
'answerChoices',
'prevVersion',
'isDeleted',
'isUpdated',
],
useAsTitle: 'name',
},
access: {
read: () => true,
},
fields: [
{
name: 'question',
type: 'text',
required: true,
},
{
name: 'label',
type: 'text',
required: true,
},
{
name: 'description',
type: 'text',
required: true,
},
// TODO: SHOW ANSWER CHOICES ONLY FOR MULTIPLE CHOICE ANSWER TYPE
{
name: 'answerType',
type: 'radio',
options: [
{
value: 'multipleChoice',
label: 'Multiple Choice',
},
{
value: 'simpleText',
label: 'Simple Text',
},
{
value: 'fileUrl',
label: 'File URL',
},
],
defaultValue: 'simpleText',
},
{
name: 'answerChoices',
type: 'array',
fields: [
{
name: 'answerChoices',
type: 'text',
},
],
},
{
name: 'regulations',
type: 'relationship',
relationTo: 'regulations',
},
{
name: 'prevVersion',
type: 'array',
fields: [
{
name: 'prevVersion',
type: 'relationship',
relationTo: 'questions',
},
],
},
{
name: 'isDeleted',
type: 'checkbox',
defaultValue: false,
},
{
name: 'isUpdated',
type: 'checkbox',
defaultValue: false,
},
],
timestamps: true,
}
export default Questions
It happens in all collections, whether there's data already in the database or we start completely fresh.
here are two examples of fields breaking the UI.
{
name: 'regulations',
type: 'relationship',
relationTo: 'regulations',
},
I've modified the next item from the full collection above. Using radio was the workaround fix for this item, but relationship seems to require the same assets for the dropdown menu.
{
name: 'answerType',
type: 'select',
options: [
{
value: 'multipleChoice',
label: 'Multiple Choice',
},
{
value: 'simpleText',
label: 'Simple Text',
},
{
value: 'fileUrl',
label: 'File URL',
},
],
@badjab326 thank you for the examples - I've used the exact same fields but am not getting your error. I definitely want to figure out why this is happening for you. What version of payload are you on?
@jesschow Thanks! We are using 1.6.15 currently. I also haven't had this issue with any of my other Payload projects (I have around 3 others to date) but this one is the only in which I'm adding Payload to an existing backend, rather than starting from the template.
you are a bit out of date, try
yarn upgrade
?
@badjab326 This happens on the
create
view? or the
edit
view?
Just gave that a shot, no dice unfortunately.
Tested both and received the same result.
Definitely not reproducible 😅
I'm adding Payload to an existing backend
do you think you could recreate this in a repo you can share?
or share this one without any private info
Actually we figured it out! We needed to add 'react-select' to the overrides, thanks for all the help!
@jesschow We tried to override react-select's version with the latest v5.7 in our package.json and that fixed the crash. Any particular reason why that might be happening?
@badjab326 @Markhor nice! What version of react-select did it show previously?
I didn't check inside payload's package json what version was installed currently but on your github it says v3
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.