DIA
discord.js - Imagine an app•6d ago
T A G A R O S

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
d.js toolkit•6d 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!
duck
duck•6d 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
T A G A R O S
T A G A R O SOP•6d ago
both I dont get any errors i dont understand 3.
duck
duck•6d ago
yes, that's because you're not logging the error you're catching
T A G A R O S
T A G A R O SOP•6d ago
oh lol
duck
duck•6d 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
T A G A R O S
T A G A R O SOP•6d 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
duck•6d 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
T A G A R O S
T A G A R O SOP•6d ago
a
duck
duck•6d ago
I'm also still not totally sure whether you've defined response yet
T A G A R O S
T A G A R O SOP•6d 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
duck•6d ago
are you logging the error you're catching? if so, have you checked what error you're receiving? also this still applies
T A G A R O S
T A G A R O SOP•6d ago
how can I log the System error here? do you have an example?
duck
duck•6d 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
T A G A R O S
T A G A R O SOP•5d 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
T A G A R O S
T A G A R O SOP•5d 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.
T A G A R O S
T A G A R O SOP•5d ago
new code still same problem above
duck
duck•5d 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
T A G A R O S
T A G A R O SOP•5d 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
duck•5d 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
T A G A R O S
T A G A R O SOP•5d ago
hm so I should show the modal when? on messageCreate? btn_collector.on("collect", async (i) => { this
duck
duck•5d ago
you may want to reread qjuh's message
T A G A R O S
T A G A R O SOP•5d ago
yes I changed it completely and added the btn_collector.on() with async (i)
duck
duck•5d ago
please pay attention to the word filter
T A G A R O S
T A G A R O SOP•5d ago
OH first interaction or second to change?
duck
duck•5d ago
please reread qjuh's message in which he mentions specifically which part of your filter is the issue
T A G A R O S
T A G A R O SOP•5d ago
ty
duck
duck•5d 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?
T A G A R O S
T A G A R O SOP•5d 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
duck•5d ago
sure
T A G A R O S
T A G A R O SOP•5d ago
user click the button
duck
duck•5d ago
then given that your button collector will collect your button interactions, consider showing the modal in response to the button interaction
T A G A R O S
T A G A R O SOP•5d 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
duck•5d 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?
T A G A R O S
T A G A R O SOP•5d 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
duck•5d 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?
T A G A R O S
T A G A R O SOP•5d ago
the i?
duck
duck•5d ago
Yes As I mentioned in my first message interaction is your slash command interaction
T A G A R O S
T A G A R O SOP•5d 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
Unknown User•5d ago
Message Not Public
Sign In & Join Server To View
T A G A R O S
T A G A R O SOP•5d 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
d.js docs•4d 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(…)
T A G A R O S
T A G A R O SOP•4d 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
Unknown User•4d ago
Message Not Public
Sign In & Join Server To View
T A G A R O S
T A G A R O SOP•4d 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

Did you find this page helpful?