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
- 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 OPthis 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)
the accent color needs to be an rgb tuple
not hex
it should work with the number
but I'm pretty sure that number is way too big
yeah it should work with hex, I've just went insane with extra components to see how far I can go
it should only have 6 digits
it has 7
mmhh let me try a other one
Button next to the content is nice!!

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 });
btw ids aren't mandatory
aah good to know thx
they autoincrement like you're doing if they aren't specified