discord.js - Imagine an app•6mo ago

Components v2 - SectionBuilder with button

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

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;
};

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'
      }
    }
  }
}

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

23 Replies

d.js toolkit•6mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Not a discord.js issue? Check out #other-js-ts. - 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

MARS•6mo ago

emoji is undefined

Mafia•6mo ago

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

EcclériaOP•6mo ago

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'
    }
  }
}

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

Mafia•6mo ago

What version of djs are you on

EcclériaOP•6mo ago

14.19.3

Mafia•6mo ago

Do you have any other buttons in your application

EcclériaOP•6mo ago

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.

Mafia•6mo ago

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

EcclériaOP•6mo ago

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] } }
}

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

Mafia•6mo ago

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

d.js docs•6mo ago

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

EcclériaOP•6mo ago

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

console.log(fieldSection.toJSON());

console.log(fieldSection.toJSON());

I'm on it

Samtino•6mo ago

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

EcclériaOP•6mo ago

I have one, I was above the character limit ^^ I've sent bellow the full SectionBuilder https://discord.com/channels/222078108977594368/1378332978572165190/1378336247612838009

Samtino•6mo ago

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

EcclériaOP•6mo ago

Np ^^ I've added some "console.log" in the corresponding "index.mjs" file It was just the next step because I have the same content in my code. I was looking at djs ^^

EcclériaOP•6mo ago

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

Gist

helpers.js

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

EcclériaOP•6mo ago

Yeah, I've put parsePollFields in this file in gist, but it's the pollsUtils.js 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'
    }
  }
}

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'
    }
  }
}

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

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

EcclériaOP•6mo ago

And if you want the command input:

EcclériaOP•6mo ago

Oh Okay now it works

EcclériaOP•6mo ago

The Autocomplete did it by itself, I've not touched to this part ^^' Thanks a lot for the help !

Gaming

Programming

Components v2 - SectionBuilder with button

Did you find this page helpful?