discord.js - Imagine an app•2mo ago

Issue with Modal -- "Something went wrong. Try again."

I've been trying to get the response from a modal, but nothing seems to come down the websocket at all and it just states that something went wrong.

client.on(Events.InteractionCreate, (interaction) => {
  if (!interaction.isModalSubmit()) return;

  // Get the data entered by the user
  const favoriteColor =
    interaction.fields.getTextInputValue("favoriteColorInput");
  const hobbies = interaction.fields.getTextInputValue("hobbiesInput");
  console.log({ favoriteColor, hobbies });
});

const buttonIdSubmitUrl = `button-${snowflake()}`;

const buttonSubmitUrl = new ButtonBuilder()
  .setCustomId(buttonIdSubmitUrl)
  .setLabel("Test")
  .setStyle(ButtonStyle.Primary);

const row = new ActionRowBuilder<ButtonBuilder>();

row.addComponents(buttonSubmitUrl);

const messagePayload = {
  content: "hey",
  components: [row],
};

const messageInteraction = await client.users.send(
  env.DISCORD_USER_ID,
  messagePayload
);

const buttonsInteraction = await messageInteraction.awaitMessageComponent({
  filter: ({ customId }) => customId === buttonIdSubmitUrl,
});

const modal = new ModalBuilder()
  .setCustomId("myModal" + Date.now())
  .setTitle("My Modal");

// Create the text input components
const favoriteColorInput = new TextInputBuilder()
  .setCustomId("favoriteColorInput" + Date.now())
  // The label is the prompt the user sees for this input
  .setLabel("What's your favorite color?")
  // Short means only a single line of text
  .setStyle(TextInputStyle.Short);

const hobbiesInput = new TextInputBuilder()
  .setCustomId("hobbiesInput" + Date.now())
  .setLabel("What's some of your favorite hobbies?")
  // Paragraph means multiple lines of text.
  .setStyle(TextInputStyle.Paragraph);

// An action row only holds one text input,
// so you need one action row per text input.
const firstActionRow =
  new ActionRowBuilder<ModalActionRowComponentBuilder>().addComponents(
    favoriteColorInput
  );
const secondActionRow =
  new ActionRowBuilder<ModalActionRowComponentBuilder>().addComponents(
    hobbiesInput
  );

// Add inputs to the modal
modal.addComponents(firstActionRow, secondActionRow);

// Show the modal to the user
await buttonsInteraction.showModal(modal);

await buttonsInteraction
  .awaitModalSubmit({ time: 60_000 })
  .then((interaction) => console.log(`${interaction.customId} was submitted!`))
  .catch(console.error);

client.on(Events.InteractionCreate, (interaction) => {
  if (!interaction.isModalSubmit()) return;

  // Get the data entered by the user
  const favoriteColor =
    interaction.fields.getTextInputValue("favoriteColorInput");
  const hobbies = interaction.fields.getTextInputValue("hobbiesInput");
  console.log({ favoriteColor, hobbies });
});

const buttonIdSubmitUrl = `button-${snowflake()}`;

const buttonSubmitUrl = new ButtonBuilder()
  .setCustomId(buttonIdSubmitUrl)
  .setLabel("Test")
  .setStyle(ButtonStyle.Primary);

const row = new ActionRowBuilder<ButtonBuilder>();

row.addComponents(buttonSubmitUrl);

const messagePayload = {
  content: "hey",
  components: [row],
};

const messageInteraction = await client.users.send(
  env.DISCORD_USER_ID,
  messagePayload
);

const buttonsInteraction = await messageInteraction.awaitMessageComponent({
  filter: ({ customId }) => customId === buttonIdSubmitUrl,
});

const modal = new ModalBuilder()
  .setCustomId("myModal" + Date.now())
  .setTitle("My Modal");

// Create the text input components
const favoriteColorInput = new TextInputBuilder()
  .setCustomId("favoriteColorInput" + Date.now())
  // The label is the prompt the user sees for this input
  .setLabel("What's your favorite color?")
  // Short means only a single line of text
  .setStyle(TextInputStyle.Short);

const hobbiesInput = new TextInputBuilder()
  .setCustomId("hobbiesInput" + Date.now())
  .setLabel("What's some of your favorite hobbies?")
  // Paragraph means multiple lines of text.
  .setStyle(TextInputStyle.Paragraph);

// An action row only holds one text input,
// so you need one action row per text input.
const firstActionRow =
  new ActionRowBuilder<ModalActionRowComponentBuilder>().addComponents(
    favoriteColorInput
  );
const secondActionRow =
  new ActionRowBuilder<ModalActionRowComponentBuilder>().addComponents(
    hobbiesInput
  );

// Add inputs to the modal
modal.addComponents(firstActionRow, secondActionRow);

// Show the modal to the user
await buttonsInteraction.showModal(modal);

await buttonsInteraction
  .awaitModalSubmit({ time: 60_000 })
  .then((interaction) => console.log(`${interaction.customId} was submitted!`))
  .catch(console.error);

The modal shows up just fine, but on submit it's failing. Any help would be appreciated!

9 Replies

d.js toolkit•2mo 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!

Squid•2mo ago

You need to acknowledge the modal interaction like you do any other interaction Right now, you're just console logging it PS: you should use a unique name for that variable: right now, interaction is used by both 1) the interaction that interactionCreate emits with and 2) the modal submit interaction

Tom•2mo ago

oh i see -- how do i acknowlege the modal interaction? I'll go snooping in the docs again i think using interaction in both places should be ok. It's scoped inside that Events.InteractionCreate listener -- right?

Squid•2mo ago

interaction at the top is normal, but I would call the modal one something like newInteraction to be different, but that's up to you ModalSubmitInteraction instances have options like .reply() to acknowledge them

Tom•2mo ago

where would the reply() go? inside of the Events.InteractionCreate handler? becuase I'm not even seeing that code run

Squid•2mo ago

Right now, the modal interaction only exists in the callback of

.then((interaction) => console.log(`${interaction.customId} was submitted!`))

.then((interaction) => console.log(`${interaction.customId} was submitted!`))

so just call interaction.reply(...) inside there

Tom•2mo ago

it never makes it in there

console.log("A");
await buttonsInteraction
  .awaitModalSubmit({ time: 60_000 })
  .then((interaction) => {
    console.log("B");
    console.log(`${interaction.customId} was submitted!`);

    interaction.reply({ content: "replied!" });
  })
  .catch(console.error);

console.log("A");
await buttonsInteraction
  .awaitModalSubmit({ time: 60_000 })
  .then((interaction) => {
    console.log("B");
    console.log(`${interaction.customId} was submitted!`);

    interaction.reply({ content: "replied!" });
  })
  .catch(console.error);

my terminal says "A" then the modal shows, i submit the modal and it shows the error message i mentioned in the topic, and "B" is not in my terminal just seems like nothing comes down the pipe at all when i hit submit in the modal could it be a permission issue or does that not make sense?

Squid•2mo ago

do you have the Channel partial? discord.js needs it to properly receive messages in DMs, so it might also be needed for interactions in DMs to function properly

Tom•2mo ago

i didn't, but i added them just now and same result if anyone else has ideas, it would be much appreciated

Gaming

Programming

Issue with Modal -- "Something went wrong. Try again."