Interaction has already been acknowledged

Question

I am currently having an issue with my /help command, the way my /help command works is it sends a nice fancy embed with a selectmenu that you can select different pages. That all works fine the issue comes when if I were to do /help and get the embed then do /help again and interact with the second embed it will crash and give the error "Interaction has already been acknowledged" Here is my code.

        const generalHelp  = { // Creates generalHelp embed.
            color: 0x901ab6,
            title: 'join our support server!',
            url: 'https://discord.gg/MUwJ85wpKP',
            author: {
                name: 'Help Menu',
                icon_url: 'https://cdn.discordapp.com/attachments/937276227692150815/937552170520301588/Letter_Z.png',
            },
            description: 'Select an option to view the commands I have!',
            fields: [
                {
                    name: ':tada: Fun Commands',
                    value: 'Shows all the bots varying fun commands in a nice little page for easy viewing.',
                    inline: true,
                },
                {
                    name: ':tools: Admin Commands',
                    value: 'Shows all the bots varying admin commands in a nice little page for easy viewing.',
                    inline: true,
                },
                /*{
                    name: '\u200b',
                    value: ' \u200b ',
                    inline: false,
                },*/
            ],
        }
        const adminHelp = { // Creates moderationHelp embed.
            color: 0x901ab6,
            author: {
                name: 'Help Menu',
                icon_url: 'https://cdn.discordapp.com/attachments/937276227692150815/937552170520301588/Letter_Z.png',
            },
            description: 'Here are the commands!',
            fields: [
                {
                    name: 'Prefix: `/`',
                    value: '\u200b',
                },
                {
                    name: ':tools: Admin Commands',
                    value: '`toggle`, `settings`'
                },
            ]
        }
        const funHelp = { // Creates funHelp embed.
            color: 0x901ab6,
            author: {
                name: 'Help Menu',
                icon_url: 'https://cdn.discordapp.com/attachments/937276227692150815/937552170520301588/Letter_Z.png',
            },
            description: 'Here are the commands!',
            fields: [
                {
                    name: 'Prefix: `/`',
                    value: '\u200b',
                },
                {
                    name: ':tada: Fun Commands',
                    value: '`ping`, `poll`',
                },
            ]
        }
        const row = new MessageActionRow() // Creates MessageActionRow with name row.
        .addComponents(
            new MessageSelectMenu()
            .setCustomId('select')
            .setPlaceholder('Select an option')
            .addOptions([
                {
                   label: '🎉 Fun Commands',
                   description: '',
                   value: 'first_option',
                },
                {
                    label: '🔨 Admin Commands',
                    description: '',
                    value: 'second_option',
                },

            ])
        )
        await interaction.reply({ embeds: [generalHelp], components: [row]}) // Displays general help embed

And here is my code that handles the interactions.

        interaction.client.on('interactionCreate', interaction => { // Detects which value is selected.
            if(!interaction.isSelectMenu()) return

            if (interaction.values[0] === 'first_option') // Checks if values[0] is = to first_option to display gameHelp embed.
            {
                interaction.update({embeds: [funHelp]}) // Updates bots interaction embed
            }
            if (interaction.values[0] === 'second_option') // Checks if values[0] is = to second_option to display musicHelp embed.
            {
                interaction.update({embeds: [adminHelp]}) // Updates bots interaction embed
            }
            else // If values[0] is anything else display error message to console. (PM2 will auto restart bot if error happens.)
            {
                return//console.log('Help Menu Select Menu Error!') // Logging to PM2 console.
            }

            
        })

If someone could help me fix it that would be great <3

Answer 1

For anyone still looking for an answer the reason this happens is because the first time it works 100% fine because there is no update and is a fresh interaction. However when you try and update it which also counts as an interaction. Putting your interactionCreate code into an event handler solves this issue.

module.exports = {
    name: 'interactionCreate',
    execute(interaction) {
        //console.log(`${interaction.user.tag} in #${interaction.channel.name} triggered an interaction.`);
        if (!interaction.isSelectMenu() && interaction.isCommand()) return

        if (interaction.customId !== 'select') return

        switch (interaction.values[0]) {
            case 'first_option':
                interaction.update({embeds: [funHelp], ephemeral: true})
                break
            case 'second_option':
                interaction.update({embeds: [adminHelp], ephemeral: true})
                break
            default:
                return
        }
    },
};

Answer 2

Its because you already .reply()-ed to the interaction, so the interaction is already acknowledged with that.

To solve this you can use .editReply():

interaction.reply({ content: 'This is my first reply!' });
interaction.editReply({ content: 'This my edited second reply!' });