Discord v14.8.0 Modal Submit not working.

Node version:

v18.12.1

v18.12.1

Current dependencies are as follows:

"dependencies": {
        "captcha-canvas": "^3.2.1",
        "discord.js": "^14.8.0",
        "dotenv": "^16.0.3"
      }

"dependencies": {
        "captcha-canvas": "^3.2.1",
        "discord.js": "^14.8.0",
        "dotenv": "^16.0.3"
      }

Slash command that creates an embed with a button to display a modal. The modal submit has the bot not responding at all.

const { CaptchaGenerator } = require('captcha-canvas');
const { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder,  AttachmentBuilder, ModalBuilder, TextInputBuilder} = require('discord.js');
const array = [];

module.exports = {
  name: 'verify',
  description: 'Verify that you are not a bot',
  devOnly: true,
  testOnly: true,

  callback: async (client, interaction) =>{
    const captcha = new CaptchaGenerator()
            .setDimension(150, 600)
            .setCaptcha({size: 60, characters: 10})
            .setDecoy({ opacity: 1, size: 40 })
            .setTrace()

    const buffer = captcha.generateSync();

    const verifyAttachment = new AttachmentBuilder(buffer, { name: 'captcha.png'});

    
    const embed = new EmbedBuilder()
      .setTitle('Keyed Chaos Captcha')
      .setDescription('Please complete the captcha!')
      .setImage('attachment://captcha.png')

    console.log(`Example captcha text:${captcha.text}\n`);
    
    const target = interaction.user.id;

    let checkmk = new ButtonBuilder()
          .setCustomId('answer')
          .setLabel('Answer Captcha')
          .setStyle(ButtonStyle.Success);

    const row = new ActionRowBuilder()
          .addComponents(checkmk);
  
    
    
    response = await interaction.reply({
      embeds:[embed], 
      files: [verifyAttachment], 
      components: [row], 
      ephemeral: true});
      
    const filter = (interaction) => interaction.customId === 'answer';
    response.awaitMessageComponent({filter, time: 15_000})
    .then(interaction => {
      console.log(`${interaction.customId} was clicked!`)
      const modal = new ModalBuilder()
      .setCustomId('verification')
      .setTitle('Keyed Chaos Verification')
      .addComponents([
        new ActionRowBuilder().addComponents(
          new TextInputBuilder()
          .setCustomId('verification-answer')
          .setLabel('Answer')
          .setStyle(2)
          .setMaxLength(10)
          .setRequired(true),
        ),
      ]);
      interaction.showModal(modal);
      
     client.on(Event.InteractionCreate, async interaction =>{
      if(!interaction.isModalSubmit()) return;

      if(interaction.customId === 'verification'){
        const modalAnswer = interaction.fields.getTextInputValue('verification-answer');
        await interaction.ModalSubmitInteraction(console.log(`Answer: ${modalAnswer}\n`))
      }


    })
    .catch(console.error);

    },
  }
}

const { CaptchaGenerator } = require('captcha-canvas');
const { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder,  AttachmentBuilder, ModalBuilder, TextInputBuilder} = require('discord.js');
const array = [];

module.exports = {
  name: 'verify',
  description: 'Verify that you are not a bot',
  devOnly: true,
  testOnly: true,

  callback: async (client, interaction) =>{
    const captcha = new CaptchaGenerator()
            .setDimension(150, 600)
            .setCaptcha({size: 60, characters: 10})
            .setDecoy({ opacity: 1, size: 40 })
            .setTrace()

    const buffer = captcha.generateSync();

    const verifyAttachment = new AttachmentBuilder(buffer, { name: 'captcha.png'});

    
    const embed = new EmbedBuilder()
      .setTitle('Keyed Chaos Captcha')
      .setDescription('Please complete the captcha!')
      .setImage('attachment://captcha.png')

    console.log(`Example captcha text:${captcha.text}\n`);
    
    const target = interaction.user.id;

    let checkmk = new ButtonBuilder()
          .setCustomId('answer')
          .setLabel('Answer Captcha')
          .setStyle(ButtonStyle.Success);

    const row = new ActionRowBuilder()
          .addComponents(checkmk);
  
    
    
    response = await interaction.reply({
      embeds:[embed], 
      files: [verifyAttachment], 
      components: [row], 
      ephemeral: true});
      
    const filter = (interaction) => interaction.customId === 'answer';
    response.awaitMessageComponent({filter, time: 15_000})
    .then(interaction => {
      console.log(`${interaction.customId} was clicked!`)
      const modal = new ModalBuilder()
      .setCustomId('verification')
      .setTitle('Keyed Chaos Verification')
      .addComponents([
        new ActionRowBuilder().addComponents(
          new TextInputBuilder()
          .setCustomId('verification-answer')
          .setLabel('Answer')
          .setStyle(2)
          .setMaxLength(10)
          .setRequired(true),
        ),
      ]);
      interaction.showModal(modal);
      
     client.on(Event.InteractionCreate, async interaction =>{
      if(!interaction.isModalSubmit()) return;

      if(interaction.customId === 'verification'){
        const modalAnswer = interaction.fields.getTextInputValue('verification-answer');
        await interaction.ModalSubmitInteraction(console.log(`Answer: ${modalAnswer}\n`))
      }


    })
    .catch(console.error);

    },
  }
}

5 Replies

d.js toolkit•8mo 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 OP

Syjalo•8mo ago

To collect interactions from an ephemeral message you also need to add fetchReply: true option to the reply

Law•8mo ago

Thank you I didn't realize I needed that option and didn't know about it either. It keeps saying something went wrong when I am trying to press submit on the modal, and I'm not getting the reply from the interaction. Will this break anything ? I've updated it I'm wondering if it has something to do with line 69 - line 76 creating the issue with the modal submission.

client.on(Event.InteractionCreate, async interaction =>{
      if(!interaction.isModalSubmit()) return;
      
      if(interaction.customId === 'verification'){
        const modalAnswer = interaction.fields.getTextInputValue('verification-answer');
        console.log(`Answer: ${modalAnswer}\n`);
        await interaction.ModalSubmitInteraction(( "Your modal has been submitted"), ephemeral = true);
      }

client.on(Event.InteractionCreate, async interaction =>{
      if(!interaction.isModalSubmit()) return;
      
      if(interaction.customId === 'verification'){
        const modalAnswer = interaction.fields.getTextInputValue('verification-answer');
        console.log(`Answer: ${modalAnswer}\n`);
        await interaction.ModalSubmitInteraction(( "Your modal has been submitted"), ephemeral = true);
      }

changing that currently

d.js docs•8mo ago

ButtonInteraction#awaitModalSubmit() Collects a single modal submit interaction that passes the filter. The Promise will reject if the time expires.

Law•8mo ago

Okay so this sounds like its a method that acts similar to a collector object right? Alright, and I did get it to work where I am getting the console log from the promisified collector but the modal keeps saying something went wrong and doesn't close out Is it possible I am missing something else? Will do one moment

const { CaptchaGenerator } = require('captcha-canvas');
const { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder,  AttachmentBuilder, ModalBuilder, TextInputBuilder} = require('discord.js');
const array = [];

module.exports = {
  name: 'verify',
  description: 'Verify that you are not a bot',
  devOnly: true,
  testOnly: true,

  callback: async (client, interaction) =>{
    const captcha = new CaptchaGenerator()
            .setDimension(150, 600)
            .setCaptcha({size: 60, characters: 10})
            .setDecoy({ opacity: 1, size: 40 })
            .setTrace()

    const buffer = captcha.generateSync();

    const verifyAttachment = new AttachmentBuilder(buffer, { name: 'captcha.png'});

    
    const embed = new EmbedBuilder()
      .setTitle('Keyed Chaos Captcha')
      .setDescription('Please complete the captcha!')
      .setImage('attachment://captcha.png')

    console.log(`Example captcha text:${captcha.text}\n`);
    
    const target = interaction.user.id;

    let checkmk = new ButtonBuilder()
          .setCustomId('answer')
          .setLabel('Answer Captcha')
          .setStyle(ButtonStyle.Success);

    const row = new ActionRowBuilder()
          .addComponents(checkmk);
  
    
    
    response = await interaction.reply({
      embeds:[embed], 
      files: [verifyAttachment], 
      components: [row], 
      ephemeral: true,
      fetchReply: true
    });
      
    const filter = (interaction) => interaction.customId === 'answer';
    response.awaitMessageComponent({filter, time: 15_000})
    .then(interaction => {
      console.log(`${interaction.customId} was clicked!`)
      const modal = new ModalBuilder()
      .setCustomId('verification')
      .setTitle('Keyed Chaos Verification')
      .addComponents([
        new ActionRowBuilder().addComponents(
          new TextInputBuilder()
          .setCustomId('verification-answer')
          .setLabel('Answer')
          .setStyle(2)
          .setMaxLength(10)
          .setRequired(true),
        ),
      ]);
      interaction.showModal(modal);    
      const filter = (interaction) => interaction.customId === 'verification';
      interaction.awaitModalSubmit({filter, time: 15_000})
      .then(interaction => {
        console.log(`${interaction.customId} was submitted`)
        interaction.getText
      })
      .catch(console.error);
        


      
      
    
    })
    .catch(console.error);

  },
};

const { CaptchaGenerator } = require('captcha-canvas');
const { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder,  AttachmentBuilder, ModalBuilder, TextInputBuilder} = require('discord.js');
const array = [];

module.exports = {
  name: 'verify',
  description: 'Verify that you are not a bot',
  devOnly: true,
  testOnly: true,

  callback: async (client, interaction) =>{
    const captcha = new CaptchaGenerator()
            .setDimension(150, 600)
            .setCaptcha({size: 60, characters: 10})
            .setDecoy({ opacity: 1, size: 40 })
            .setTrace()

    const buffer = captcha.generateSync();

    const verifyAttachment = new AttachmentBuilder(buffer, { name: 'captcha.png'});

    
    const embed = new EmbedBuilder()
      .setTitle('Keyed Chaos Captcha')
      .setDescription('Please complete the captcha!')
      .setImage('attachment://captcha.png')

    console.log(`Example captcha text:${captcha.text}\n`);
    
    const target = interaction.user.id;

    let checkmk = new ButtonBuilder()
          .setCustomId('answer')
          .setLabel('Answer Captcha')
          .setStyle(ButtonStyle.Success);

    const row = new ActionRowBuilder()
          .addComponents(checkmk);
  
    
    
    response = await interaction.reply({
      embeds:[embed], 
      files: [verifyAttachment], 
      components: [row], 
      ephemeral: true,
      fetchReply: true
    });
      
    const filter = (interaction) => interaction.customId === 'answer';
    response.awaitMessageComponent({filter, time: 15_000})
    .then(interaction => {
      console.log(`${interaction.customId} was clicked!`)
      const modal = new ModalBuilder()
      .setCustomId('verification')
      .setTitle('Keyed Chaos Verification')
      .addComponents([
        new ActionRowBuilder().addComponents(
          new TextInputBuilder()
          .setCustomId('verification-answer')
          .setLabel('Answer')
          .setStyle(2)
          .setMaxLength(10)
          .setRequired(true),
        ),
      ]);
      interaction.showModal(modal);    
      const filter = (interaction) => interaction.customId === 'verification';
      interaction.awaitModalSubmit({filter, time: 15_000})
      .then(interaction => {
        console.log(`${interaction.customId} was submitted`)
        interaction.getText
      })
      .catch(console.error);
        


      
      
    
    })
    .catch(console.error);

  },
};

I'm not understanding because I have a block of code running inside the scope of the .then callback I fixed the interaction by adding a interaction.reply message which has worked to solve the issue with the modal.

Gaming

Programming

Discord v14.8.0 Modal Submit not working.