DIA
discord.js - Imagine an app•6mo ago
! Kaizaki

Need help with Component V2 layout (discord.js v14)

Hey! I'm working with Component V2 using the new builders like ContainerBuilder, SectionBuilder, ThumbnailBuilder, etc. I'm trying to build a layout like this: - A section with a thumbnail + header - A separator - Another section with ping stats text Here's the code I'm using:
4 Replies
d.js toolkit
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!
! Kaizaki
! KaizakiOP•6mo ago
const header = new TextDisplayBuilder().setContent("> Trexz's Speed Report");

const thumbnail = new ThumbnailBuilder()
  .setURL(me.avatarURL({ size: 1024 }))
  .setDescription("Trexz");

const section1 = new SectionBuilder()
  .addTextDisplayComponents(header)
  .setThumbnailAccessory(thumbnail);

const divider = new SeparatorBuilder().setDivider(true).setSpacing(1);

const pingText = new TextDisplayBuilder().setContent(
  `> API Latency : **${wsPing}ms**\n> Client Latency : **${clientPing}ms**\n> Shard Latency : **${shardPing}ms**`
);

const section2 = new SectionBuilder().addTextDisplayComponents(pingText);

const container = new ContainerBuilder()
  .addSectionComponents(section1)
  .addSeparatorComponents(divider)
  .addSectionComponents(section2);

await interaction.editReply({
  flags: MessageFlags.IsComponentsV2,
  components: [container.toJSON()],
});
const header = new TextDisplayBuilder().setContent("> Trexz's Speed Report");

const thumbnail = new ThumbnailBuilder()
  .setURL(me.avatarURL({ size: 1024 }))
  .setDescription("Trexz");

const section1 = new SectionBuilder()
  .addTextDisplayComponents(header)
  .setThumbnailAccessory(thumbnail);

const divider = new SeparatorBuilder().setDivider(true).setSpacing(1);

const pingText = new TextDisplayBuilder().setContent(
  `> API Latency : **${wsPing}ms**\n> Client Latency : **${clientPing}ms**\n> Shard Latency : **${shardPing}ms**`
);

const section2 = new SectionBuilder().addTextDisplayComponents(pingText);

const container = new ContainerBuilder()
  .addSectionComponents(section1)
  .addSeparatorComponents(divider)
  .addSectionComponents(section2);

await interaction.editReply({
  flags: MessageFlags.IsComponentsV2,
  components: [container.toJSON()],
});
[400 Bad Request] PATCH /webhooks/.../messages/@original flags [MESSAGE_CANNOT_REMOVE_COMPONENTS_V2_FLAG] Error 50035: Invalid Form Body can anyone help me ? node v22.16.0 discord.js@14.20.0 ok wait 
[22/6/2025 : 1:08:58 pm] [RAM: 110.67 MB] :beginner: [WARN]   | Error: Invalid Form Body 50035
[400 Bad Request] PATCH /webhooks/1324078510251442227/:token/messages/@original
flags [MESSAGE_CANNOT_REMOVE_COMPONENTS_V2_FLAG]: The MessageFlags.IS_COMPONENTS_V2 flag cannot be removed from a message once it has been set.
    at ApiHandler.parseError (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:210:16)
    at Object.callback [as next] (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:160:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
[22/6/2025 : 1:08:58 pm] [RAM: 110.68 MB] :skull: [FATAL]  | ping.<onInternalError> Error: Invalid Form Body 50035
[400 Bad Request] PATCH /webhooks/1324078510251442227/:token/messages/@original
flags [MESSAGE_CANNOT_REMOVE_COMPONENTS_V2_FLAG]: The MessageFlags.IS_COMPONENTS_V2 flag cannot be removed from a message once it has been set.
    at ApiHandler.parseError (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:210:16)
    at Object.callback [as next] (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:160:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
[22/6/2025 : 1:08:58 pm] [RAM: 110.67 MB] :beginner: [WARN]   | Error: Invalid Form Body 50035
[400 Bad Request] PATCH /webhooks/1324078510251442227/:token/messages/@original
flags [MESSAGE_CANNOT_REMOVE_COMPONENTS_V2_FLAG]: The MessageFlags.IS_COMPONENTS_V2 flag cannot be removed from a message once it has been set.
    at ApiHandler.parseError (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:210:16)
    at Object.callback [as next] (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:160:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
[22/6/2025 : 1:08:58 pm] [RAM: 110.68 MB] :skull: [FATAL]  | ping.<onInternalError> Error: Invalid Form Body 50035
[400 Bad Request] PATCH /webhooks/1324078510251442227/:token/messages/@original
flags [MESSAGE_CANNOT_REMOVE_COMPONENTS_V2_FLAG]: The MessageFlags.IS_COMPONENTS_V2 flag cannot be removed from a message once it has been set.
    at ApiHandler.parseError (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:210:16)
    at Object.callback [as next] (D:\My-V2\frozen-music\node_modules\seyfert\lib\api\api.js:160:42)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
yes ah but im using discord.js for Component V2 in this ;-; just trying something new 🙂 hmm ok but we can use components like this right ? I'm not creating my own Client instance or connecting to the gateway twice. I'm fully using Seyfert to handle the gateway, commands, etc. Just needed access to the low-level layout builders because Seyfert doesn't expose custom wrappers for V2 components yet (or I prefer using the raw ones). So it’s one bot running, one gateway just using both packages for convenience.
! Kaizaki
! KaizakiOP•6mo ago
! Kaizaki
! KaizakiOP•6mo ago
Hmm right Is there any place where I can find detailed docs or examples for Component V2 layouts and how to use all the builders properly?

Did you find this page helpful?