Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Unable to find node on an unmounted component

default discord avatar
badjab3262 years ago
13

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?

  • default discord avatar
    paulpopus2 years ago
    @201094837066399744

    whats your collection config? does it happen on all of them or just this one?

  • default discord avatar
    jessrynkar2 years ago
    @201094837066399744

    - 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.

  • default discord avatar
    badjab3262 years ago
    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',
            },
          ],
  • default discord avatar
    jessrynkar2 years ago
    @201094837066399744

    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?

  • default discord avatar
    badjab3262 years ago
    @854377910689202256

    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.

  • default discord avatar
    paulpopus2 years ago

    you are a bit out of date, try

    yarn upgrade

    ?

  • discord user avatar
    jarrod_not_jared
    2 years ago
    @201094837066399744

    This happens on the

    create

    view? or the

    edit

    view?

  • default discord avatar
    badjab3262 years ago

    Just gave that a shot, no dice unfortunately.



    Tested both and received the same result.

  • default discord avatar
    paulpopus2 years ago

    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

  • default discord avatar
    badjab3262 years ago

    Actually we figured it out! We needed to add 'react-select' to the overrides, thanks for all the help!

  • default discord avatar
    markhor.2 years ago
    @854377910689202256

    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?

  • default discord avatar
    jessrynkar2 years ago
    @201094837066399744

    @182597927133249536

    nice! What version of react-select did it show previously?

  • default discord avatar
    markhor.2 years ago

    I didn't check inside payload's package json what version was installed currently but on your github it says v3

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.