Topics

discord.js - Imagine an app•3mo ago

P H O E T A N I X

Buttons instantly disappear after using slash command

https://pastebin.com/36riQB8n The code above is my command. The Buttons on the ephemenal message disappear instantly after calling the command.

Pastebin

SlashCommand - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

45 Replies

d.js toolkit•3mo 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 staff

duck•3mo ago

to clarify, do you also receive the Confirmation not received within 1 minute, cancelling message? or are you only seeing the buttons disappear? if you do see this message, this is likely due to you receiving ReferenceError: response is not defined 1. you should consider logging your errors 2. you seem to be using 2 collectors for the same purpose, one promisified and one not (lines 238 and 245) 3. the filter goes in the filter option for either method, not as collector_filter or just as the first param 4. after attempting to collect a button interaction, you seem to suddenly attempt to handle interaction as if it's a modal submit without ever having shown a modal within this code and despite interaction being your slash command interaction

P H O E T A N I XOP•3mo ago

both I dont get any errors i dont understand 3.

duck•3mo ago

yes, that's because you're not logging the error you're catching

P H O E T A N I XOP•3mo ago

oh lol

duck•3mo ago

here's your code:

const btn_collector = interaction.channel.createMessageComponentCollector({
  collector_filter,
  time: 60_000,
});
await response.resource.message.awaitMessageComponent(collector_filter);

const btn_collector = interaction.channel.createMessageComponentCollector({
  collector_filter,
  time: 60_000,
});
await response.resource.message.awaitMessageComponent(collector_filter);

the neither filter is actually being used it needs to be passed to the filter option

P H O E T A N I XOP•3mo ago

I removed the frist btn collector and changed to this:

const collector_filter = (interaction) =>
      interaction.user.id === interaction.user.id;

    try {
      const confirmation =
        await response.resource.message.awaitMessageComponent(collector_filter, 60_000);
...

const collector_filter = (interaction) =>
      interaction.user.id === interaction.user.id;

    try {
      const confirmation =
        await response.resource.message.awaitMessageComponent(collector_filter, 60_000);
...

duck•3mo ago

that's still not how awaitMessageComponent works it takes a single param that should be an options object again, you need to pass the filter as the filter option you seemed to have already been aware of the time option before, so I'm also not sure why you're suddenly passing what I assume is the time as the second param now

P H O E T A N I XOP•3mo ago

a

duck•3mo ago

I'm also still not totally sure whether you've defined response yet

P H O E T A N I XOP•3mo ago

uh wait a sec i didnt sigh Now I see its actually prevMSG instead of repsonse after I changed to prevMsg.resource.message.awaitMessageComponent(collector_filter, 60_000); Still the same problem

duck•3mo ago

are you logging the error you're catching? if so, have you checked what error you're receiving? also this still applies

P H O E T A N I XOP•3mo ago

how can I log the System error here? do you have an example?

duck•3mo ago

if you're unsure how to log things, given some of your previous issues, I'm gonna suggest you brush up on the basics of javascript before continuing or if you're unsure how to access the caught error from try/catch, I'd at least suggest looking at the docs for try/catch @T A G A R O S your own code from before correctly sets the time option awaitMessageComponent takes a similar options object

P H O E T A N I XOP•3mo ago

ok ty oh i see ty

const collector_filter = (interaction) =>
      interaction.user.id === interaction.user.id;

    try {
      const confirmation =
      await prevMsg.awaitMessageComponent({ filter: collector_filter, time: 60_000 });
      if (confirmation.customId === "set_embed") {
        if (!interaction.isModalSubmit()) return console.log("Not a modal submit");

        if (interaction.customId === "modal_embedMsg") {
          const UMSub_embedMsg_title =
            interaction.fields.getTextInputValue("modal_cID_title");
          const UMSub_embedMsg_desc =
          
          embedData = {
            color: UMSub_embedMsg_color,
            title: UMSub_embedMsg_title,
          };

          await interaction.showModal(embed_Modal)

          await interaction.editReply({
            content: "**Preview!**",
            embeds: [embedData],
            components: [btnrow2],
          });
        }
      } else if (confirmation.customId === "send_cancel") {
        await interaction.editReply({
          content: "Embed canceled.",
          components: [],
        });
        btn_collector.stop();
        return;
      } else if (confirmation.customId === "send_confirm") {
        await interaction.channel.send({
          content: `${role.toString()}`,
          embeds: [embed],
        });
        await interaction.editReply({
          content: "Embed confirmed and sent!",
          components: [],
        });
        btn_collector.stop();
        return;
      }
    } catch (e) {
      (console.error || console.log).call(console, e.stack || e);
      await interaction.editReply({
        content: "Confirmation not received within 1 minute, cancelling",
        components: [],
      });
    }
  },

const collector_filter = (interaction) =>
      interaction.user.id === interaction.user.id;

    try {
      const confirmation =
      await prevMsg.awaitMessageComponent({ filter: collector_filter, time: 60_000 });
      if (confirmation.customId === "set_embed") {
        if (!interaction.isModalSubmit()) return console.log("Not a modal submit");

        if (interaction.customId === "modal_embedMsg") {
          const UMSub_embedMsg_title =
            interaction.fields.getTextInputValue("modal_cID_title");
          const UMSub_embedMsg_desc =
          
          embedData = {
            color: UMSub_embedMsg_color,
            title: UMSub_embedMsg_title,
          };

          await interaction.showModal(embed_Modal)

          await interaction.editReply({
            content: "**Preview!**",
            embeds: [embedData],
            components: [btnrow2],
          });
        }
      } else if (confirmation.customId === "send_cancel") {
        await interaction.editReply({
          content: "Embed canceled.",
          components: [],
        });
        btn_collector.stop();
        return;
      } else if (confirmation.customId === "send_confirm") {
        await interaction.channel.send({
          content: `${role.toString()}`,
          embeds: [embed],
        });
        await interaction.editReply({
          content: "Embed confirmed and sent!",
          components: [],
        });
        btn_collector.stop();
        return;
      }
    } catch (e) {
      (console.error || console.log).call(console, e.stack || e);
      await interaction.editReply({
        content: "Confirmation not received within 1 minute, cancelling",
        components: [],
      });
    }
  },

my code stop at if (!interaction.isModalSubmit()) return console.log("Not a modal submit"); and I get not a modal

P H O E T A N I XOP•3mo ago

https://pastebin.com/ENkAinzG

Pastebin

SlashCommand - Pastebin.com

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

P H O E T A N I XOP•3mo ago

new code still same problem above

duck•3mo ago

number 4 up here createMessageComponentCollector collects a message component interaction which is to say, it will collect when a user clicks on a button you then proceed to check if the slash command interaction is a modal submit (which it's not), and attempt to parse modal fields from the slash command then afterwards you show a modal in response to the slash command which has already been responded to

P H O E T A N I XOP•3mo ago

I changed it to i i changed to this now:

const collector_filter = (interaction) =>
      interaction.user.id === interaction.user.id;

    btn_collector = interaction.channel.createMessageComponentCollector({
      filter: collector_filter,
      time: 60_000,
    });

    btn_collector.on("collect", async (i) => {
      try {
        if (i.customId === "set_embed") {
          if (i.user.id !== interaction.user.id) {
            return i.reply({
              content: "This session is not for you.",
              ephemeral: true,
            });
          }
          if (!interaction.isModalSubmit())
            return console.log("Not a modal submit");
...

const collector_filter = (interaction) =>
      interaction.user.id === interaction.user.id;

    btn_collector = interaction.channel.createMessageComponentCollector({
      filter: collector_filter,
      time: 60_000,
    });

    btn_collector.on("collect", async (i) => {
      try {
        if (i.customId === "set_embed") {
          if (i.user.id !== interaction.user.id) {
            return i.reply({
              content: "This session is not for you.",
              ephemeral: true,
            });
          }
          if (!interaction.isModalSubmit())
            return console.log("Not a modal submit");
...

The problem is that the program stops at

if (!interaction.isModalSubmit())
       return console.log("Not a modal submit");

if (!interaction.isModalSubmit())
       return console.log("Not a modal submit");

terminal output is Not a modal submit

duck•3mo ago

yes, that's because the slash command still isn't a modal submit you still haven't shown the modal at this point, and the modal submit will be its own interaction I also don't see this change in your filter

P H O E T A N I XOP•3mo ago

hm so I should show the modal when? on messageCreate? btn_collector.on("collect", async (i) => { this

duck•3mo ago

you may want to reread qjuh's message

P H O E T A N I XOP•3mo ago

yes I changed it completely and added the btn_collector.on() with async (i)

duck•3mo ago

please pay attention to the word filter

P H O E T A N I XOP•3mo ago

OH first interaction or second to change?

duck•3mo ago

please reread qjuh's message in which he mentions specifically which part of your filter is the issue

P H O E T A N I XOP•3mo ago

ty

duck•3mo ago

anyways returning to this, modals can't be shown in response to messages, only interactions so with that in mind, when do you want the modal to be shown? in response to the user clicking the button?

P H O E T A N I XOP•3mo ago

const collector_filter = (int) =>
      int.user.id === interaction.user.id;

const collector_filter = (int) =>
      int.user.id === interaction.user.id;

this should work then

duck•3mo ago

sure

P H O E T A N I XOP•3mo ago

user click the button

duck•3mo ago

then given that your button collector will collect your button interactions, consider showing the modal in response to the button interaction

P H O E T A N I XOP•3mo ago

I did

await interaction.showModal(embed_Modal);

await interaction.showModal(embed_Modal);

after the modals you mean like do it before try catch?

duck•3mo ago

so thinking on the parameters you recently renamed, which interaction would you say is your button interaction? and furthermore, should the modal be shown after you handle the response to the modal?

P H O E T A N I XOP•3mo ago

ofc not. I thought i was building the response first then send modal the left one sorry Im answering slow bc Im helpin my mom makinf dinner rn Now after I put await interaction.showModal(embed_Modal); before the try the message just removed all buttons and Confirmation not received within 1 minute, cancelling was showing and error: Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred. appeared exactly where I put the new showModal

duck•3mo ago

this isn't about your filter, so there isn't a "left" or "right" interaction here what variable contains your button interaction? which is to say where do you handle what your collector collects?

P H O E T A N I XOP•3mo ago

the i?

duck•3mo ago

Yes As I mentioned in my first message interaction is your slash command interaction

P H O E T A N I XOP•3mo ago

I changed now to

    const collector_filter = (inter) =>
      inter.user.id === inter.user.id;

    const collector_filter = (inter) =>
      inter.user.id === inter.user.id;

Unknown User•3mo ago

Message Not Public

Sign In & Join Server To View

P H O E T A N I XOP•3mo ago

the filter should be that only the current user can interact with the button.... but wait oops sorry if i pinged didnt mean to The message is ephenemal anyways i dont need the filter I still get the error:

Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred.

Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred.

for the await interaction.showModal(embed_Modal); when I put the line before the try

btn_collector.on("collect", async (i) => {
      await interaction.showModal(embed_Modal);
      try {
        if (i.customId === "set_embed") {
          if (i.user.id !== interaction.user.id) {
            return i.reply({
              content: "This session is not for you.",
              ephemeral: true,
            });
          }
          if (!interaction.isModalSubmit())
            return console.log("Not a modal submit");

          if (interaction.customId === "modal_embedMsg") {
            const UMSub_embedMsg_title =
              interaction.fields.getTextInputValue("modal_cID_title");
            const UMSub_embedMsg_desc =
              interaction.fields.getTextInputValue("modal_cID_desc");

            embedData = {
              title: UMSub_embedMsg_title,
              description: UMSub_embedMsg_desc,
            };

            await interaction.showModal(embed_Modal);

            await interaction.editReply({
              content: "**Preview!**",
              embeds: [embedData],
              components: [btnrow2],
            });
          }
        } else if (i.customId === "send_cancel") {
          await interaction.editReply({
            content: "Embed canceled.",
            components: [],
          });
          btn_collector.stop();
          return;
        } else if (i.customId === "send_confirm") {
          await interaction.channel.send({
            content: `${role.toString()}`,
            embeds: [embedData],
          });
          await interaction.editReply({
            content: "Embed confirmed and sent!",
            components: [],
          });
          btn_collector.stop();
          return;
        }
      } catch (e) {
        (console.error || console.log).call(console, e.stack || e);
        await interaction.editReply({
          content: "Confirmation not received within 1 minute, cancelling",
          components: [],
        });
      }
    });

btn_collector.on("collect", async (i) => {
      await interaction.showModal(embed_Modal);
      try {
        if (i.customId === "set_embed") {
          if (i.user.id !== interaction.user.id) {
            return i.reply({
              content: "This session is not for you.",
              ephemeral: true,
            });
          }
          if (!interaction.isModalSubmit())
            return console.log("Not a modal submit");

          if (interaction.customId === "modal_embedMsg") {
            const UMSub_embedMsg_title =
              interaction.fields.getTextInputValue("modal_cID_title");
            const UMSub_embedMsg_desc =
              interaction.fields.getTextInputValue("modal_cID_desc");

            embedData = {
              title: UMSub_embedMsg_title,
              description: UMSub_embedMsg_desc,
            };

            await interaction.showModal(embed_Modal);

            await interaction.editReply({
              content: "**Preview!**",
              embeds: [embedData],
              components: [btnrow2],
            });
          }
        } else if (i.customId === "send_cancel") {
          await interaction.editReply({
            content: "Embed canceled.",
            components: [],
          });
          btn_collector.stop();
          return;
        } else if (i.customId === "send_confirm") {
          await interaction.channel.send({
            content: `${role.toString()}`,
            embeds: [embedData],
          });
          await interaction.editReply({
            content: "Embed confirmed and sent!",
            components: [],
          });
          btn_collector.stop();
          return;
        }
      } catch (e) {
        (console.error || console.log).call(console, e.stack || e);
        await interaction.editReply({
          content: "Confirmation not received within 1 minute, cancelling",
          components: [],
        });
      }
    });

this is the shorten version my btn_collector:

  btn_collector = interaction.channel.createMessageComponentCollector({
      componentType: ComponentType.Button,
      time: 60_000,
    });

  btn_collector = interaction.channel.createMessageComponentCollector({
      componentType: ComponentType.Button,
      time: 60_000,
    });

d.js docs•3mo ago

tag suggestion for @T A G A R O S: If you are waiting for button or select menu input from a specific message, don't create the collector on the channel. - Channel collectors return component interactions for any component within that channel.

- <Channel>.createMessageComponentCollector(…)
+ <Message>.createMessageComponentCollector(…)

- <Channel>.createMessageComponentCollector(…)
+ <Message>.createMessageComponentCollector(…)

P H O E T A N I XOP•2mo ago

ohh the replied message

    const prevMsg = await interaction.editReply({
      content: "**Preview!**",
      embeds: [prevEmbed],
      components: [btnrow],
    });

...

btn_collector = prevMsg.createMessageComponentCollector({
      componentType: ComponentType.Button,
      time: 60_000,
    });

...

btn_collector.on("collect", async (i) => {
      try {
        if (i.customId === "set_embed") {
          await interaction.showModal(embed_Modal);
          if (!interaction.isModalSubmit())
            return console.log("Not a modal submit");
...
..

    const prevMsg = await interaction.editReply({
      content: "**Preview!**",
      embeds: [prevEmbed],
      components: [btnrow],
    });

...

btn_collector = prevMsg.createMessageComponentCollector({
      componentType: ComponentType.Button,
      time: 60_000,
    });

...

btn_collector.on("collect", async (i) => {
      try {
        if (i.customId === "set_embed") {
          await interaction.showModal(embed_Modal);
          if (!interaction.isModalSubmit())
            return console.log("Not a modal submit");
...
..

I changed to this but I still get the same error as before at await interaction.showModal(embed_Modal); Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred.

Unknown User•2mo ago

Message Not Public

Sign In & Join Server To View

P H O E T A N I XOP•2mo ago

ohhh thanks! Ì already tried but got invalid form error instead

DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[0].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[1].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[1].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[2].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[2].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[3].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[3].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width

DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[0].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[1].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[1].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[2].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[2].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[3].components[1][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width
data.components[3].components[2][COMPONENT_LAYOUT_WIDTH_EXCEEDED]: The specified component exceeds the maximum width

but I only have 4 rows and 3 inputs each oh thats why and how much row? is max? ok ty

discord.js - Imagine an app Join

Support server for discord.js, a Node.js module to interact with Discord's apps API.

58KMembers

View on Discord

Did you find this page helpful?