在 discord.js v13 中为帮助命令制作嵌入页面时出错

Question

So i was coding a help command for my discord bot but I can't seem to make embed pages with it. I want there to be 4 buttons - First Page Button, Last Page Button, Previous Page and Next Page. I was able to make a code that sends the embed message with the buttons that have the emojis, but the buttons don't seem to work. Below is my code :

const { 
    MessageActionRow, 
    MessageButton, 
    MessageEmbed 
} = require('discord.js');

async function help(msg, serverprefix, client) {

    // -------------------------

    const embed1 = new MessageEmbed()
        .setColor('#0099ff')
        .setTitle('Help')
        .setDescription('This is the help page 1!')
        .setFooter('Page 1/3')

    const embed2 = new MessageEmbed()
        .setColor('#0099ff')
        .setTitle('Help')
        .setDescription('This is the help page 2!')
        .setFooter('Page 2/3')

    const embed3 = new MessageEmbed()
        .setColor('#0099ff')
        .setTitle('Help')
        .setDescription('This is the help page 3!')
        .setFooter('Page 3/3')
    
    // -------------------------

    const row = new MessageActionRow()
        .addComponents(
            new MessageButton()
                .setCustomId('first')
                .setStyle('PRIMARY')
                .setEmoji('955425801904455700')
        )

        .addComponents(
            new MessageButton()
                .setCustomId('prev')
                .setStyle('PRIMARY')
                .setEmoji('955425801883508756')
        )

        .addComponents(
            new MessageButton()
                .setCustomId('next')
                .setStyle('PRIMARY')
                .setEmoji('955425802151927858')
        )

        .addComponents(
            new MessageButton()
                .setCustomId('last')
                .setStyle('PRIMARY')
                .setEmoji('955425801833173044')
        )
    
    // -------------------------
    
    msg.channel.send({
        embeds: [embed1],
        components: [row]
    })

    // -------------------------

    const filter = i => i.user.id === msg.author.id;
    const collector = msg.channel.createMessageComponentCollector({ filter, idle: 20000 });

    // -------------------------

    collector.on('collect', async (i) => {
        if (i.customId == 'first') {
            if (i.deferred == true || i.replied == true) {
                await i.editReply({
                    embeds: [embed1],
                    components: [row]
                })
            }
            
            await i.update({
                embeds: [embed1],
                components: [row]
            })
        } else if (i.customId == 'prev') {
            if (i.message.embeds[0].footer.text == 'Page 1/3') {
                if (i.deferred == true || i.replied == true) {
                    await i.editReply({
                        embeds: [embed3],
                        components: [row]
                    })
                }
                
                await i.update({
                    embeds: [embed3],
                    components: [row]
                })
            }

            if (i.message.embeds[0].footer.text == 'Page 2/3') {
                if (i.deferred == true || i.replied == true) {
                    await i.editReply({
                        embeds: [embed1],
                        components: [row]
                    })
                }
                
                await i.update({
                    embeds: [embed1],
                    components: [row]
                })
            }

            if (i.message.embeds[0].footer.text == 'Page 3/3') {
                if (i.deferred == true || i.replied == true) {
                    await i.editReply({
                        embeds: [embed2],
                        components: [row]
                    })
                }
                
                await i.update({
                    embeds: [embed2],
                    components: [row]
                })
            }
        } else if (i.customId == 'next') {
            if (i.message.embeds[0].footer.text == 'Page 1/3') {
                if (i.deferred == true || i.replied == true) {
                    await i.editReply({
                        embeds: [embed2],
                        components: [row]
                    })
                }
                
                await i.update({
                    embeds: [embed2],
                    components: [row]
                })
            }

            if (i.message.embeds[0].footer.text == 'Page 2/3') {
                if (i.deferred == true || i.replied == true) {
                    await i.editReply({
                        embeds: [embed3],
                        components: [row]
                    })
                }
                
                await i.update({
                    embeds: [embed3],
                    components: [row]
                })
            }

            if (i.message.embeds[0].footer.text == 'Page 3/3') {
                if (i.deferred == true || i.replied == true) {
                    await i.editReply({
                        embeds: [embed1],
                        components: [row]
                    })
                }
                
                await i.update({
                    embeds: [embed1],
                    components: [row]
                })
            }
        } else if (i.customId == 'last') {
            if (i.deferred == true || i.replied == true) {
                await i.editReply({
                    embeds: [embed3],
                    components: [row]
                })
            }
            
            await i.update({
                embeds: [embed3],
                components: [row]
            })
        }
    });

    // -------------------------

}

module.exports = {
    name: 'help',
    description: 'Help command for the bot',
    execute(msg, serverprefix, client) {
        help(msg, serverprefix, client);
    }
}

This code gives this error :

I have tried a few solutions like checking with an if statement if it is already replied / deferred then edit, and without if, but it's the same. I also copy-pasted this code from Discord Guide :

await i.deferUpdate();
await wait(4000);
await i.editReply({ content: 'A button was clicked!', components: [row] });

and I have tried many more but none of them seem to work. I also know there are npm packages for this kind of pagination which make it very easy but I want to do it with discord.js only. I am using discord.js v13 and I'm on Mac. Any help will be appreciated.

Answer 1

Do you really want so many pages for your help command? People arn't gonna read that! I use this as help command! goodluck.
this is the index:

client.commands = new Collection();
const commandFiles = fs.readdirSync('./commands').filter(file => file.endsWith('.js'));

for (const file of commandFiles) {
    const command = require(`./commands/${file}`);
    client.commands.set(command.name, command);
}

and this the tickethelp:

const { prefix } = require('../config.json');
const { MessageEmbed, Collection, Permissions } = require('discord.js');

module.exports = {
    name: 'tickethelp',
    description: 'List all of all the commands or info about a specific command. This includes ticket commands.',
    aliases: ['thelp'],
    admin: true,
    execute(message, args, client) {
        var commandEmbedDesc = '';
        const { commands } = message.client;

        if (!message.member.permissions.has(Permissions.FLAGS.MANAGE_MESSAGES)) return message.channel.send("You don't have the permissions to execute this command.")

        if (!args.length) {

            const helpDesc = commands.map(command => '**' + command.name + '**').join('\n');

            const embed = new MessageEmbed()
            .setTitle('Here\'s a list of all my ticket commands:')
            .setDescription(helpDesc)
            .setColor('RANDOM')
            .setFooter({text: '\nYou can send ${prefix}help [command name] to get info on a specific command!'});
            return message.channel.send({embeds: [embed]});

        }


        const name = args[0].toLowerCase();
        const command = commands.get(name) || commands.find(c => c.aliases && c.aliases.includes(name));

        if (!command) {
            return message.reply('that\'s not a valid command!');
        }

        commandEmbedDesc += `**Name:** ${command.name}\n`;

        if (command.aliases) commandEmbedDesc += `**Aliases:** ${command.aliases.join(', ')}\n`;
        if (command.description) commandEmbedDesc += `**Description:** ${command.description}\n`;
        if (command.usage) commandEmbedDesc += `**Usage:** ${prefix}${command.name} ${command.usage}\n`;
        if (command.options) {

            commandEmbedDesc += `\n*Options:*\n`;

            command.options.forEach(item => {
                commandEmbedDesc += `${item.name}: ${item.description}\n`;
                commandEmbedDesc += `Input type: ${item.type}\nRequired: ${item.required}\n`;

                if (item.choices) {
                    commandEmbedDesc += `**Choices:**\n`;

                    item.choices.forEach(option => {
                        commandEmbedDesc += `**${option.value}:** ${option.name}\n`;
                    });
                }

                commandEmbedDesc += `\n`;

            });
        }

        const embed = new MessageEmbed()
            .setTitle(`Here\'s a short explanation of: ${command.name}`)
            .setDescription(commandEmbedDesc)
            .setColor('RANDOM')
            .setFooter({text: '\nYou can send ${prefix}help [command name] to get info on a specific command!'});
        message.reply({ embeds: [embed]});

        
        
    },
};