Editing a Select Menu | Discord.js

Question

I'm trying to get all the text channel in the guild and list them into a Select Menu and I'm getting some trouble.

Here is my code :

const { PermissionOverwrites, Permissions, Collection, MessageEmbed, MessageActionRow, MessageSelectMenu } = require("discord.js");
const dotenv = require("dotenv");

dotenv.config();

module.exports = {
    data: {
        name: `select-raid-options`
    },
    async execute (interaction) {
        let guild = interaction.client.guilds.cache.get(process.env.GUILD_ID);
        switch (interaction.values[0]) {
            case 'raid_channel':
                let raidChannel = guild.channels.cache.find(channel => channel.name === 'raid');
                raidChannel.send('Raid');
                break;
            case 'select_channel':
                // Create the Embed Message
                const channelSelectorMessage = new MessageEmbed()
                    .setColor('#e4e8eb')
                    .setTitle('Veuillez sélectionnez le channel où vous souhaitez publier votre raid.')
                    .setTimestamp()

                // Create the Select Menu
                let channelSelectorSelect = new MessageSelectMenu()
                    .setCustomId('select-raid-channel')
                    .setPlaceholder('Nothing selected')
                    .addOptions([
                        {
                            label: `Annuler`,
                            description: 'Annulez la publication de votre raid.',
                            value: 'cancel',
                        },
                    ]);

                // Get all channels in the guild
                guild.channels.cache.forEach(channel => {
                    // Check if the channel is not the raid channel
                    if (channel.name !== 'raid') {
                        // add channel to the select menu
                        channelSelectorSelect.addOptions([
                            {
                                label: `${channel.name}`, // Option label
                                description: `${channel.name}`, // Option description
                                value: `${channel.id}`, // Option value
                            },
                        ]);
                    }
                })

                console.log(channelSelectorSelect); // Debug to see the select menu
                interaction.user.send({embeds: [channelSelectorMessage], components: [channelSelectorSelect]}); // Send the message with the select menu to the user
            }
        await interaction.reply({ content:'Information envoyée !', ephemeral: true });
    }  
}

The console.log of the channelSelectorSelect return me this :

MessageSelectMenu {
  type: 'SELECT_MENU',
  customId: 'select-raid-channel',
  placeholder: 'Nothing selected',
  minValues: null,
  maxValues: null,
  options: [
    {
      label: 'Annuler',
      value: 'cancel',
      description: 'Annulez la publication de votre raid.',
      emoji: null,
      default: false
    },
    {
      label: '📍- 𝗜𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻𝘀',
      value: '953674264408653825',
      description: '📍- 𝗜𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻𝘀',
      emoji: null,
      default: false
    },
    {
      label: '📜𝗥𝗲̀𝗴𝗹𝗲𝘀',
      value: '953674264408653826',
      description: '📜𝗥𝗲̀𝗴𝗹𝗲𝘀',
      emoji: null,
      default: false
    },
    {
      label: '📢𝗔𝗻𝗻𝗼𝗻𝗰𝗲𝘀',
      value: '953674264408653827',
      description: '📢𝗔𝗻𝗻𝗼𝗻𝗰𝗲𝘀',
      emoji: null,
      default: false
    },
    {
      label: '🎫 - 𝗢𝘂𝘃𝗲𝗿𝘁𝘂𝗿𝗲 𝗧𝗶𝗰𝗸𝗲𝘁𝘀',
      value: '954015397336735807',
      description: '🎫 - 𝗢𝘂𝘃𝗲𝗿𝘁𝘂𝗿𝗲 𝗧𝗶𝗰𝗸𝗲𝘁𝘀',
      emoji: null,
      default: false
    },
    {
      label: '👤𝗔𝘀𝘀𝗶𝘀𝘁𝗮𝗻𝗰𝗲',
      value: '954015876892475433',
      description: '👤𝗔𝘀𝘀𝗶𝘀𝘁𝗮𝗻𝗰𝗲',
      emoji: null,
      default: false
    },
    {
      label: '💻𝗗𝗲́𝘃𝗲𝗹𝗼𝗽𝗽𝗲𝗺𝗲𝗻𝘁',
      value: '954015934081794128',
      description: '💻𝗗𝗲́𝘃𝗲𝗹𝗼𝗽𝗽𝗲𝗺𝗲𝗻𝘁',
      emoji: null,
      default: false
    },
    {
      label: '💬𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀',
      value: '954016142844895302',
      description: '💬𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀',
      emoji: null,
      default: false
    },
    {
      label: '🛒𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝗲𝘀',
      value: '954016204966727680',
      description: '🛒𝗖𝗼𝗺𝗺𝗮𝗻𝗱𝗲𝘀',
      emoji: null,
      default: false
    },
    {
      label: '🎫 - 𝗧𝗶𝗰𝗸𝗲𝘁𝘀 𝗢𝘂𝘃𝗲𝗿𝘁𝘀',
      value: '954020253757739018',
      description: '🎫 - 𝗧𝗶𝗰𝗸𝗲𝘁𝘀 𝗢𝘂𝘃𝗲𝗿𝘁𝘀',
      emoji: null,
      default: false
    },
    {
      label: '3wa',
      value: '963018402132267048',
      description: '3wa',
      emoji: null,
      default: false
    },
    {
      label: 'tickets',
      value: '963018417936420895',
      description: 'tickets',
      emoji: null,
      default: false
    },
    {
      label: 'Degré Zero',
      value: '973526523200016384',
      description: 'Degré Zero',
      emoji: null,
      default: false
    },
    {
      label: 'test-commands',
      value: '973528693714595860',
      description: 'test-commands',
      emoji: null,
      default: false
    }
  ],
  disabled: false
}

And when I send the message with the selector, i get this error :

DiscordAPIError: Invalid Form Body components[0]: The specified component type is invalid in this context

If somebody have an idea to how to fix it ?

Thank you

Answer 1

The other answer is correct, I figured I'd put the code since that page doesn't demonstrate how to dynamically add options.

// Create the Message Action row
let channelSelectorSelect = new MessageActionRow()
    .addComponents(
        new MessageSelectMenu()
        .setCustomId('select-raid-channel')
        .setPlaceholder('Nothing selected')
        .addOptions([{
            label: `Annuler`,
            description: 'Annulez la publication de votre raid.',
            value: 'cancel',
        }]);
    )

guild.channels.cache.forEach(channel => {
    if (channel.name !== 'raid') {
        // add channel to the select menu - the below line was changed
        channelSelectorSelect.components[0].addOptions([{
            label: `${channel.name}`,
            description: `${channel.name}`,
            value: `${channel.id}`,
        }]);
    }
})

Answer 2

You need to add the select menu to an action row. If you don't know how visit this page in the Discord.js Guide