Components v2 - SectionBuilder with button | discord.js - imagine an app | Page 1

outer cargo May 31, 2025, 11:23 AM

#

Hey everyone. I'm trying to add a ButtonBuilder to a SectionBuilder, nested in a ContainerBuilder. But when trying to post the message, I get an error:

path/node_modules/@discordjs/builders/dist/index.mjs:486
      throw new RangeError("Non-premium buttons must have a label and/or an emoji.");
            ^

RangeError: Non-premium buttons must have a label and/or an emoji.
    at validateRequiredButtonParameters (path/node_modules/@discordjs/builders/dist/index.mjs:486:13)
    at ButtonBuilder.toJSON (path/node_modules/@discordjs/builders/dist/index.mjs:654:5)
    at SectionBuilder.toJSON (path/node_modules/@discordjs/builders/dist/index.mjs:2102:59)       
    at path/src/commands/polls/polls.js:271:34
    at Array.forEach (<anonymous>)
    at Object.action (path/src/commands/polls/polls.js:252:20)

Node.js v20.11.1

I tried to look at an error in my code but I cannot find one.

const container = new ContainerBuilder();

//create button
const buttonId = "polls_" + idx.toString();
const button = createButton(buttonId, field, ButtonStyle.Secondary, emote);
const fieldSection = new SectionBuilder().setButtonAccessory(button);

//line 271
console.log(fieldSection.toJSON());

container.addSectionComponents(fieldSection);
interaction.channel.send({flags: MessageFlags.IsComponentsV2, components: [container]});

//creatButton function:
export const createButton = (id, label, style, emoji) => {
  const button = new ButtonBuilder().setCustomId(id).setStyle(style);
  if (label) button.setLabel(label);
  if (emoji) button.setEmoji(emoji);
  return button;
};

When investigating the Builders, I have this weird accessory in the SectionBuilder:

SectionBuilder {
  data: { type: 9 },
  //components
  accessory: ButtonBuilder {
    data: {
      type: 2,
      data: {
        type: 2,
        emoji: undefined,
        custom_id: 'polls_0',
        style: 2,
        label: 'Choice 1'
      }
    }
  }
}

cosmic roseBOT May 31, 2025, 11:23 AM

#

What's your exact discord.js npm list discord.js and node node -v version?
Not a discord.js issue? Check out #1081585952654360687.
Consider reading #how-to-get-help to improve your question!
Explain what exactly your issue is.
Post the full error stack trace, not just the top part!
Show your code!
Issue solved? Press the button!
✅ Marked as resolved by OP

scarlet basin May 31, 2025, 11:26 AM

#

emoji is undefined

little trellis May 31, 2025, 11:27 AM

#

scarlet basin emoji is undefined

Yeah but that shouldn't matter because there's a label

outer cargo May 31, 2025, 11:29 AM

#

scarlet basin emoji is undefined

I have the same issue when passing an emote ^^

ButtonBuilder {
  data: {
    type: 2,
    data: {
      type: 2,
      emoji: { id: undefined, name: '1️⃣', animated: false },
      custom_id: 'polls_0',
      style: 2,
      label: 'Choice 1'
    }
  }
}

little trellis May 31, 2025, 11:31 AM

#

What version of djs are you on

outer cargo May 31, 2025, 11:32 AM

#

14.19.3

little trellis May 31, 2025, 11:32 AM

#

Do you have any other buttons in your application

outer cargo May 31, 2025, 11:34 AM

#

I have some that I used before this djs version, all working fine with ActionRows. But when trying to adapt my code to Components V2, I have this weird ButtonBuilder.

little trellis May 31, 2025, 11:35 AM

#

Your section is mal formed. I missed it you need to add a text display component.

outer cargo May 31, 2025, 11:35 AM

#

I have some but skipped that part because I was above the character limit ^^

#

SectionBuilder {
  data: { type: 9 },
  components: [
    TextDisplayBuilder { data: [Object] },
    TextDisplayBuilder { data: [Object] }
  ],
  accessory: ButtonBuilder { data: { type: 2, data: [Object] } }
}

little trellis May 31, 2025, 11:36 AM

#

I see

#

Well I need to see the full code. bc what you shared look fine

shut meteorBOT May 31, 2025, 11:38 AM

#

To share long code snippets, use a service like gist, sourcebin, pastebin, or similar instead of posting them as large code blocks or files.

gleaming bison May 31, 2025, 11:47 AM

#

outer cargo Hey everyone. I'm trying to add a ButtonBuilder to a SectionBuilder, nested in a...

Is this polls.js line 271?

outer cargo May 31, 2025, 11:48 AM

#

Oh that's right, I forgot this one. I've edited the post above to have it inside

console.log(fieldSection.toJSON());

outer cargo May 31, 2025, 11:48 AM

#

shut meteor To share long code snippets, use a service like [gist](https://gist.github.com),...

I'm on it

silent belfry May 31, 2025, 11:50 AM

#

At least from your snippet, the error is that you are creating a Section with no TextDisplay in it.

Instead, send the button in an ActionRow

outer cargo May 31, 2025, 11:52 AM

#

I have one, I was above the character limit ^^ I've sent bellow the full SectionBuilder
#1378332978572165190 message

silent belfry May 31, 2025, 11:53 AM

#

Ah I see, I missed that part... My bad

outer cargo May 31, 2025, 11:53 AM

#

Np ^^

gleaming bison May 31, 2025, 11:57 AM

#

outer cargo Oh that's right, I forgot this one. I've edited the post above to have it inside...

Then where does your "investigating the builders" come from?

outer cargo May 31, 2025, 11:58 AM

#

I've added some "console.log" in the corresponding "index.mjs" file

gleaming bison May 31, 2025, 11:58 AM

#

So in a completely different place. That doesn't tell you anything about the state of your code right here. Why not log right there instead?

outer cargo May 31, 2025, 12:02 PM

#

It was just the next step because I have the same content in my code. I was looking at djs ^^

#

https://gist.github.com/Eccleria/95c0e564fa2072e08b4f24291d768261

Gist

helpers.js

GitHub Gist: instantly share code, notes, and snippets.

gleaming bison May 31, 2025, 12:07 PM

#

outer cargo https://gist.github.com/Eccleria/95c0e564fa2072e08b4f24291d768261

Is the helpers.js the same as the pollsUtils.js?

gleaming bison May 31, 2025, 12:08 PM

#

outer cargo It was just the next step because I have the same content in my code. I was look...

And you apparently don't have the same content, because if you did then it wouldn't error

outer cargo May 31, 2025, 12:08 PM

#

gleaming bison Is the helpers.js the same as the pollsUtils.js?

Yeah, I've put parsePollFields in this file in gist, but it's the pollsUtils.js

outer cargo May 31, 2025, 12:10 PM

#

gleaming bison And you apparently don't have the same content, because if you did then it would...

The logs from the console logs in the polls.js file:

button ButtonBuilder {
  data: {
    type: 2,
    emoji: { id: undefined, name: '1️⃣', animated: false },
    custom_id: 'polls_0',
    style: 2,
    label: 'Choice 1'
  }
}
section SectionBuilder {
  data: { type: 9 },
  components: [
    TextDisplayBuilder { data: [Object] },
    TextDisplayBuilder { data: [Object] }
  ],
  accessory: ButtonBuilder { data: { type: 2, data: [Object] } }
}
section ButtonBuilder {
  data: {
    type: 2,
    data: {
      type: 2,
      emoji: [Object],
      custom_id: 'polls_0',
      style: 2,
      label: 'Choice 1'
    }
  }
}

gleaming bison May 31, 2025, 12:10 PM

#

outer cargo Yeah, I've put parsePollFields in this file in gist, but it's the pollsUtils.js

Show the output of that console.log of results then

outer cargo May 31, 2025, 12:11 PM

#

results {
  fields: [ 'Choice 1', 'Choice 2', 'Choice 3' ],
  emotes: [ '1️⃣', '2️⃣', '3️⃣' ]
}

#

And if you want the command input:

gleaming bison May 31, 2025, 12:15 PM

#

outer cargo The logs from the console logs in the polls.js file: ``` button ButtonBuilder { ...

That double nested data: {} looks wrong Thonk

#

Ah, you need to import the builders from discord.js, not /builders

#

Else the internal instanceof check fails

outer cargo May 31, 2025, 12:16 PM

#

Oh

#

Okay now it works

#

#Components v2 - SectionBuilder with button