Component V2 error

Can somebody help me with my djs component V2 implementation. This my code
const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, ContainerBuilder, MessageFlags, SectionBuilder, SeparatorBuilder, SeparatorSpacingSize, TextDisplayBuilder } = require('discord.js');
const { PermissionFlagsBits } = require('discord.js');

module.exports = {
name: 'test',
description: 'test command for dosojin',
defaultMemberPermissions: PermissionFlagsBits.ManageMessages,
dm_permission: false,
async execute(interaction) {
if (interaction.user.id != "251438744387715073") {
interaction.reply({content: "Wait, stop, who are you? You are not Dosojin.", ephemeral: true});
}

const container2 = new ContainerBuilder()
.setAccentColor(0x3447003)
.addComponents(
new SectionBuilder()
.setButtonAccessory(
new ButtonBuilder()
.setStyle(ButtonStyle.Primary)
.setLabel("Fast Badger")
.setCustomId("784b211c319344838f176b342889dc08")
)
.addTextDisplayComponents(
new TextDisplayBuilder().setContent("Behind every robot, there's a jealous toaster."),
new TextDisplayBuilder().setContent("If life gives you toaster, make invisible unicorn soup."),
new TextDisplayBuilder().setContent("If life gives you emotional potato, make invisible unicorn soup."),
new TextDisplayBuilder().setContent("Always lick a cactus before you sing opera.")
),
new SeparatorBuilder()
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small),
new ActionRowBuilder()
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Link)
.setURL("https://google.com")
.setLabel("Sassy Boar"),
new ButtonBuilder()
.setStyle(ButtonStyle.Success)
.setLabel("Wild Donkey")
.setCustomId("55360c3ba0a34247e18a3cb628111103"),
new ButtonBuilder()
.setStyle(ButtonStyle.Danger)
.setLabel("Hairy Okapi")
.setCustomId("cfcd507185e74c44f0f205c2275e71df")
),
new ActionRowBuilder()
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Beautiful Baboon")
.setDisabled(true)
.setCustomId("526fbec3bc964852e895728acd1c08cb"),
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Furry Viper")
.setCustomId("2576aa024352422cf320db6de098ef5e")
),
new SeparatorBuilder()
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small),
new TextDisplayBuilder()
.setContent("If life gives you emotional potato, make toaster soup.")
);

await interaction.reply({ components: [container2], flags: MessageFlags.IsComponentsV2 });

}
};
const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, ContainerBuilder, MessageFlags, SectionBuilder, SeparatorBuilder, SeparatorSpacingSize, TextDisplayBuilder } = require('discord.js');
const { PermissionFlagsBits } = require('discord.js');

module.exports = {
name: 'test',
description: 'test command for dosojin',
defaultMemberPermissions: PermissionFlagsBits.ManageMessages,
dm_permission: false,
async execute(interaction) {
if (interaction.user.id != "251438744387715073") {
interaction.reply({content: "Wait, stop, who are you? You are not Dosojin.", ephemeral: true});
}

const container2 = new ContainerBuilder()
.setAccentColor(0x3447003)
.addComponents(
new SectionBuilder()
.setButtonAccessory(
new ButtonBuilder()
.setStyle(ButtonStyle.Primary)
.setLabel("Fast Badger")
.setCustomId("784b211c319344838f176b342889dc08")
)
.addTextDisplayComponents(
new TextDisplayBuilder().setContent("Behind every robot, there's a jealous toaster."),
new TextDisplayBuilder().setContent("If life gives you toaster, make invisible unicorn soup."),
new TextDisplayBuilder().setContent("If life gives you emotional potato, make invisible unicorn soup."),
new TextDisplayBuilder().setContent("Always lick a cactus before you sing opera.")
),
new SeparatorBuilder()
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small),
new ActionRowBuilder()
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Link)
.setURL("https://google.com")
.setLabel("Sassy Boar"),
new ButtonBuilder()
.setStyle(ButtonStyle.Success)
.setLabel("Wild Donkey")
.setCustomId("55360c3ba0a34247e18a3cb628111103"),
new ButtonBuilder()
.setStyle(ButtonStyle.Danger)
.setLabel("Hairy Okapi")
.setCustomId("cfcd507185e74c44f0f205c2275e71df")
),
new ActionRowBuilder()
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Beautiful Baboon")
.setDisabled(true)
.setCustomId("526fbec3bc964852e895728acd1c08cb"),
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Furry Viper")
.setCustomId("2576aa024352422cf320db6de098ef5e")
),
new SeparatorBuilder()
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small),
new TextDisplayBuilder()
.setContent("If life gives you emotional potato, make toaster soup.")
);

await interaction.reply({ components: [container2], flags: MessageFlags.IsComponentsV2 });

}
};
12 Replies
d.js toolkit
d.js toolkit4d 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
Dosojin
DosojinOP4d ago
this is my error
CombinedError (3)
Received one or more errors
1 ValidationError > s.nullish()
| Expected undefined or null
|
| Received:
| | 54816771
2 ExpectedConstraintError > s.number().lessThanOrEqual()
| Invalid number value
|
| Expected: expected <= 16777215
|
| Received:
| | 54816771
3 ValidationError > s.tuple(T)
| Expected an array
|
| Received:
| | 54816771
at _UnionValidator.handle (/root/udid/bot/node_modules/@sapphire/shapeshift/dist/cjs/index.cjs:1965:23)
at _UnionValidator.parse (/root/udid/bot/node_modules/@sapphire/shapeshift/dist/cjs/index.cjs:972:90)
at ContainerBuilder.setAccentColor (/root/udid/bot/node_modules/@discordjs/builders/dist/index.js:1762:29)
at Object.execute (/root/udid/bot/Commands/test.js:31:14)
at module.exports.<anonymous> (/root/udid/bot/main.js:816:21)
at module.exports.emit (node:events:518:28)
at InteractionCreateAction.handle (/root/udid/bot/node_modules/discord.js/src/client/actions/InteractionCreate.js:97:12)
at module.exports [as INTERACTION_CREATE] (/root/udid/bot/node_modules/discord.js/src/client/websocket/handlers/INTERACTION_CREATE.js:4:36)
at WebSocketManager.handlePacket (/root/udid/bot/node_modules/discord.js/src/client/websocket/WebSocketManager.js:348:31)
at WebSocketManager.<anonymous> (/root/udid/bot/node_modules/discord.js/src/client/websocket/WebSocketManager.js:232:12)
CombinedError (3)
Received one or more errors
1 ValidationError > s.nullish()
| Expected undefined or null
|
| Received:
| | 54816771
2 ExpectedConstraintError > s.number().lessThanOrEqual()
| Invalid number value
|
| Expected: expected <= 16777215
|
| Received:
| | 54816771
3 ValidationError > s.tuple(T)
| Expected an array
|
| Received:
| | 54816771
at _UnionValidator.handle (/root/udid/bot/node_modules/@sapphire/shapeshift/dist/cjs/index.cjs:1965:23)
at _UnionValidator.parse (/root/udid/bot/node_modules/@sapphire/shapeshift/dist/cjs/index.cjs:972:90)
at ContainerBuilder.setAccentColor (/root/udid/bot/node_modules/@discordjs/builders/dist/index.js:1762:29)
at Object.execute (/root/udid/bot/Commands/test.js:31:14)
at module.exports.<anonymous> (/root/udid/bot/main.js:816:21)
at module.exports.emit (node:events:518:28)
at InteractionCreateAction.handle (/root/udid/bot/node_modules/discord.js/src/client/actions/InteractionCreate.js:97:12)
at module.exports [as INTERACTION_CREATE] (/root/udid/bot/node_modules/discord.js/src/client/websocket/handlers/INTERACTION_CREATE.js:4:36)
at WebSocketManager.handlePacket (/root/udid/bot/node_modules/discord.js/src/client/websocket/WebSocketManager.js:348:31)
at WebSocketManager.<anonymous> (/root/udid/bot/node_modules/discord.js/src/client/websocket/WebSocketManager.js:232:12)
treble/luna
treble/luna4d ago
the accent color needs to be an rgb tuple not hex
Amgelo
Amgelo4d ago
it should work with the number but I'm pretty sure that number is way too big
Dosojin
DosojinOP4d ago
yeah it should work with hex, I've just went insane with extra components to see how far I can go
Amgelo
Amgelo4d ago
it should only have 6 digits it has 7
Dosojin
DosojinOP4d ago
mmhh let me try a other one
Dosojin
DosojinOP4d ago
Button next to the content is nice!!
No description
Dosojin
DosojinOP4d ago
const container2 = new ContainerBuilder()
.setId(1)
.setAccentColor(0x0099ff)
.addSectionComponents(component => component
.setId(2)
.setButtonAccessory(new ButtonBuilder()
.setStyle(ButtonStyle.Primary)
.setLabel("Fast Badger")
.setCustomId("784b211c319344838f176b342889dc08")
)
.addTextDisplayComponents(component => component
.setId(3)
.setContent("Behind every robot, there's a jealous toaster.")
)
.addTextDisplayComponents(component => component
.setId(4)
.setContent("If life gives you toaster, make invisible unicorn soup.")
)
)
.addSeparatorComponents(component => component
.setId(7)
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small)
)
.addActionRowComponents(component => component
.setId(8)
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Link)
.setURL("https://google.com")
.setLabel("Sassy Boar"),
new ButtonBuilder()
.setStyle(ButtonStyle.Success)
.setLabel("Wild Donkey")
.setCustomId("55360c3ba0a34247e18a3cb628111103"),
new ButtonBuilder()
.setStyle(ButtonStyle.Danger)
.setLabel("Hairy Okapi")
.setCustomId("cfcd507185e74c44f0f205c2275e71df")
)
)
.addActionRowComponents(component => component
.setId(9)
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Beautiful Baboon")
.setDisabled(true)
.setCustomId("526fbec3bc964852e895728acd1c08cb"),
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Furry Viper")
.setCustomId("2576aa024352422cf320db6de098ef5e")
)
)
.addSeparatorComponents(component => component
.setId(10)
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small)
)
.addTextDisplayComponents(component => component
.setId(11)
.setContent("If life gives you emotional potato, make toaster soup.")
)

await interaction.reply({ components: [container2], flags: MessageFlags.IsComponentsV2 });
const container2 = new ContainerBuilder()
.setId(1)
.setAccentColor(0x0099ff)
.addSectionComponents(component => component
.setId(2)
.setButtonAccessory(new ButtonBuilder()
.setStyle(ButtonStyle.Primary)
.setLabel("Fast Badger")
.setCustomId("784b211c319344838f176b342889dc08")
)
.addTextDisplayComponents(component => component
.setId(3)
.setContent("Behind every robot, there's a jealous toaster.")
)
.addTextDisplayComponents(component => component
.setId(4)
.setContent("If life gives you toaster, make invisible unicorn soup.")
)
)
.addSeparatorComponents(component => component
.setId(7)
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small)
)
.addActionRowComponents(component => component
.setId(8)
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Link)
.setURL("https://google.com")
.setLabel("Sassy Boar"),
new ButtonBuilder()
.setStyle(ButtonStyle.Success)
.setLabel("Wild Donkey")
.setCustomId("55360c3ba0a34247e18a3cb628111103"),
new ButtonBuilder()
.setStyle(ButtonStyle.Danger)
.setLabel("Hairy Okapi")
.setCustomId("cfcd507185e74c44f0f205c2275e71df")
)
)
.addActionRowComponents(component => component
.setId(9)
.addComponents(
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Beautiful Baboon")
.setDisabled(true)
.setCustomId("526fbec3bc964852e895728acd1c08cb"),
new ButtonBuilder()
.setStyle(ButtonStyle.Secondary)
.setLabel("Furry Viper")
.setCustomId("2576aa024352422cf320db6de098ef5e")
)
)
.addSeparatorComponents(component => component
.setId(10)
.setDivider(true)
.setSpacing(SeparatorSpacingSize.Small)
)
.addTextDisplayComponents(component => component
.setId(11)
.setContent("If life gives you emotional potato, make toaster soup.")
)

await interaction.reply({ components: [container2], flags: MessageFlags.IsComponentsV2 });
Amgelo
Amgelo4d ago
btw ids aren't mandatory
Dosojin
DosojinOP4d ago
aah good to know thx
Amgelo
Amgelo4d ago
they autoincrement like you're doing if they aren't specified

Did you find this page helpful?