Discord.js Autocomplete 'Loading Options Failed'

Question

I am in the process of creating a discord bot using discord.js v14 and have encountered a problem with the autocomplete feature. I followed the discord.js documentation on the command exactly, and no error shows up, but when I try to use the command, it shows 'Loading Options Failed':

Here is my code:

const { SlashCommandBuilder } = require('discord.js');

module.exports = {
    data: new SlashCommandBuilder()
        .setName('test')
        .setDescription('testing')
        .addStringOption(option =>
            option.setName('option')
                .setDescription('The option to select')
                .setRequired(true)
                .setAutocomplete(true)),
    async autocomplete(interaction) {
        const focusedValue = interaction.options.getFocused();
        const choices = ['Apples' , 'Oranges' , 'Bananas' , 'Grapes' , 'Watermelons'];
        const filtered = choices.filter(choice => choice.startsWith(focusedValue));
        await interaction.respond(
            filtered.map(choice => ({ name: choice, value: choice })),
        );
    },
};

Here is my index.js file if it is needed:

const fs = require('node:fs');
const path = require('node:path');
const { Client, Collection, Events, GatewayIntentBits, ActivityType } = require('discord.js');
const { token, clientId, guildId } = require('./config.json');
let slashcmdExec = require("./deploy-slashcmds.js")
slashcmdExec.deployCommands()

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

client.commands = new Collection();
const commandsPath = path.join(__dirname, 'commands');
const commandFiles = fs.readdirSync(commandsPath).filter(file => file.endsWith('.js'));

for (const file of commandFiles) {
    const filePath = path.join(commandsPath, file);
    const command = require(filePath);
    client.commands.set(command.data.name, command);
}

client.once("ready", () => {
    console.log('Ready!');
    
   client.user.setPresence({
  activities: [{ name: `over Everything...`, type: ActivityType.Watching }],
  status: 'idle',
});
});

client.on(Events.InteractionCreate, async interaction => {

    const command = client.commands.get(interaction.commandName);

    if (!command) return console.log("Command was not found");

    try {
        await command.execute(interaction);
    } catch (error) {
        console.error(error);
        await interaction.reply({ content: 'There was an error while executing this command!', ephemeral: true });
    }

});

client.login(token);

I saw a similar post that said to remove if (!interaction.isChatInputCommand()) return; and so I did, but the error still persisted.

Answer 1

The problem is that you don't handle autocomplete inside your InteractionCreate handler. Your current code only works with commands.

You can check if the interaction is an autocomplete interaction with isAutcocomplete(). If it is, you can run the autocomplete() method of your exported object.

Now that you handle autocomplete, you can add another if statement that checks if the interaction is a command. You can use isChatInputCommand() for this.

client.on(Events.InteractionCreate, async (interaction) => {
  if (interaction.isAutocomplete()) {
    const command = client.commands.get(interaction.commandName);

    if (!command) return console.log('Command was not found');

    if (!command.autocomplete)
      return console.error(
        `No autocomplete handler was found for the ${interaction.commandName} command.`,
      );

    try {
      await command.autocomplete(interaction);
    } catch (error) {
      console.error(error);
    }
  }

  if (interaction.isChatInputCommand()) {
    const command = client.commands.get(interaction.commandName);

    if (!command) return console.log('Command was not found');

    try {
      await command.execute(interaction);
    } catch (error) {
      console.error(error);
      await interaction.reply({
        content: 'There was an error while executing this command!',
        ephemeral: true,
      });
    }
  }
});