DJS V13 Buttons getting error Interaction has Already been acknowledged

Question

When interacting with the button I want to resend the thing but a different version. Before trying that I am trying to just do what the guide does, I get the error Interaction Has Already Been Acknowledged when clicking it.

The code is below:

const { SlashCommandBuilder } = require('@discordjs/builders');
const { MessageEmbed, Client, MessageActionRow, MessageButton } = require('discord.js');
const wait = require('node:timers/promises').setTimeout;


let report = ""

module.exports = {
    data: new SlashCommandBuilder()
        .setName('report')
        .setDescription('Report a user, this can be for anything and is sent to MTIA.')
    .addStringOption(option =>
          option.setName('user')
              .setDescription('Please include there RBLX and DISC usernames, discord ID too.')
              .setRequired(true))
    .addStringOption(option =>
          option.setName('report')
              .setDescription('Reason for report, please include links to proof.')
              .setRequired(true))
    .addStringOption(option =>
          option.setName('where')
              .setDescription('Where the action took place.')
              .setRequired(true)),
    async execute(interaction, client) {

    const channel = client.channels.cache.get('962342252263395378');
    
    if(report == "") {
      let report = interaction.options.getString('report')
      let offender = interaction.options.getString('user')
      let where = interaction.options.getString('where')
      
      const A = new MessageEmbed()
        .setTitle("**New Report**")
        .setDescription(`Offender: ${offender} \n Reporter: ${interaction.user.tag} \n Reason: ${report} \n Location: ${where} \n \n  Responce: None`)
        .setTimestamp()
        .setColor("00000")

    const row = new MessageActionRow()
            .addComponents(
                new MessageButton()
                    .setCustomId('banuser')
                    .setLabel('Ban the User')
                    .setStyle('SUCCESS'),
        new MessageButton()
                    .setCustomId('otheraction')
                    .setLabel('Other action taken.')
                    .setStyle('PRIMARY'),
        new MessageButton()
                    .setCustomId('deny')
                    .setLabel('Deny the report.')
                    .setStyle('DANGER'),
            );

      
      channel.send({ embeds: [A], components: [row] });
      interaction.reply(`Report submitted.`);


      
    };
            const B = new MessageEmbed()
        .setTitle("**New Report**")
        .setDescription(`Offender: ${offender} \n Reporter: ${interaction.user.tag} \n Reason: ${report} \n Location: ${where} \n \n  Responce: Banned`)
        .setTimestamp()
        .setColor("00FF00")
      
      const C = new MessageEmbed()
        .setTitle("**New Report**")
        .setDescription(`Offender: ${offender} \n Reporter: ${interaction.user.tag} \n Reason: ${report} \n Location: ${where} \n \n  Responce: Denied Report`)
        .setTimestamp()
        .setColor("FF0000")
      
      const D = new MessageEmbed()
        .setTitle("**New Report**")
        .setDescription(`Offender: ${offender} \n Reporter: ${interaction.user.tag} \n Reason: ${report} \n Location: ${where} \n \n  Responce: Other Action`)
        .setTimestamp()
        .setColor("FFFFFF")

    const filter = i => i.customId === 'banuser' && i.user.id === '776164004460363816';

    const collector = interaction.channel.createMessageComponentCollector({ filter, time: 15000 });
                                                                  
      
    collector.on('collect', async i => {
        if (i.customId === 'banuser') {
            await i.deferUpdate();
            await wait(4000);
            await i.editReply({ content: 'A button was clicked!', components: [] });
            }
        }); 
    },
};

I have tried to change the bit around getting the button. How can I fix this and why am I getting this error?

Answer 1

Change your collector to the below

    collector.on('collect', async i => {
        if (i.customId === 'banuser') {
            await i.deferUpdate();
            await wait(4000);
            await i.message.edit({components: []}) //Removing the button from the initial reply
            await i.reply({ content: 'A button was clicked!'}); //Since you want to resend and not edit

            }
        });