discord.js - Imagine a bot•16mo ago

Error when trying to show modal after clicking button.

I'm trying to show a modal when the user clicks a button included in the reply, but I keep getting the 'InteractionAlreadyReplied' error.

// Dependencies
const { ButtonBuilder, ButtonStyle, ModalBuilder, TextInputBuilder, TextInputStyle, ActionRowBuilder } = require("discord.js");

module.exports = async function (interaction) {
    // Variables
    let msg;
    let collector;

    // Buttons
    const editDataButton = new ButtonBuilder()
        .setCustomId("editDataButton")
        .setLabel("EditID")
        .setStyle(ButtonStyle.Primary);
    const editDataRow = new ActionRowBuilder().addComponents(editDataButton);

    // Modals
    const editIDModal = new ModalBuilder()
        .setCustomId("editIDModal")
        .setTitle("EditID")

    // Text Inputs
    const IDInput = new TextInputBuilder()
        .setCustomId("IDInput")
        .setPlaceholder("ID")
        .setStyle(TextInputStyle.Short)
        .setMinLength(1)
        .setMaxLength(20)
        .setRequired(true);

    // Set Modal Components
    editIDModal.addComponents(IDInput);

    msg = await interaction.reply({
    content: "Please edit your account ID below.",
        components: [editDataRow],
    });

    collector = msg.createMessageComponentCollector();

    collector.on("collect", async (i) => {
        if (i.customId == "editDataButton") {
            await interaction.showModal(editIDModal)
        }
    });
};

// Dependencies
const { ButtonBuilder, ButtonStyle, ModalBuilder, TextInputBuilder, TextInputStyle, ActionRowBuilder } = require("discord.js");

module.exports = async function (interaction) {
    // Variables
    let msg;
    let collector;

    // Buttons
    const editDataButton = new ButtonBuilder()
        .setCustomId("editDataButton")
        .setLabel("EditID")
        .setStyle(ButtonStyle.Primary);
    const editDataRow = new ActionRowBuilder().addComponents(editDataButton);

    // Modals
    const editIDModal = new ModalBuilder()
        .setCustomId("editIDModal")
        .setTitle("EditID")

    // Text Inputs
    const IDInput = new TextInputBuilder()
        .setCustomId("IDInput")
        .setPlaceholder("ID")
        .setStyle(TextInputStyle.Short)
        .setMinLength(1)
        .setMaxLength(20)
        .setRequired(true);

    // Set Modal Components
    editIDModal.addComponents(IDInput);

    msg = await interaction.reply({
    content: "Please edit your account ID below.",
        components: [editDataRow],
    });

    collector = msg.createMessageComponentCollector();

    collector.on("collect", async (i) => {
        if (i.customId == "editDataButton") {
            await interaction.showModal(editIDModal)
        }
    });
};

I was told using deferReply was previously stopping it from working, so I switched it to a normal reply. Still getting the same error. P.S. There's other variables in there due to there being database management things, I removed them to clear up what's causing the issue.

9 Replies

d.js toolkit•16mo ago

- What's your exact discord.js npm list discord.js and node node -v version? - Post the full error stack trace, not just the top part! - Show your code! - Explain what exactly your issue is. - Not a discord.js issue? Check out #useful-servers. - Issue solved? Press the button!

Visual Studio CodeOP•16mo ago

Discord.JS Ver: 14.11.0 NodeJS Ver: v20.2.0 Full Error:

C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:252
    if (this.deferred || this.replied) throw new DiscordjsError(ErrorCodes.InteractionAlreadyReplied);
                                             ^

Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred.    at ChatInputCommandInteraction.showModal (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:252:46)
    at InteractionCollector.<anonymous> (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\src\commands\link.js:96:31)
    at InteractionCollector.emit (node:events:523:35)
    at InteractionCollector.handleCollect (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\Collector.js:133:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'InteractionAlreadyReplied'
}

C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:252
    if (this.deferred || this.replied) throw new DiscordjsError(ErrorCodes.InteractionAlreadyReplied);
                                             ^

Error [InteractionAlreadyReplied]: The reply to this interaction has already been sent or deferred.    at ChatInputCommandInteraction.showModal (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:252:46)
    at InteractionCollector.<anonymous> (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\src\commands\link.js:96:31)
    at InteractionCollector.emit (node:events:523:35)
    at InteractionCollector.handleCollect (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\Collector.js:133:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  code: 'InteractionAlreadyReplied'
}

Unknown User•16mo ago

Message Not Public

Visual Studio CodeOP•16mo ago

Invalid form body error 😔

C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:640
      throw new DiscordAPIError(data, "code" in data ? data.code : data.error, status, method, url, requestData);
            ^

DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[BASE_TYPE_BAD_LENGTH]: Must be between 1 and 1521 in length.
    at handleErrors (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:640:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async BurstHandler.runRequest (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:736:23)
    at async REST.request (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:1387:22)
    at async ButtonInteraction.showModal (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:253:5)
    at async InteractionCollector.<anonymous> (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\src\commands\link.js:43:13) {
  requestBody: {
    files: undefined,
    json: {
      type: 9,
      data: {
        custom_id: 'editIDModal',
        title: 'EditID',
        components: [ { type: 1, data: [Object], components: [] } ]
      }
    }
  },
  rawError: {
    message: 'Invalid Form Body',
    code: 50035,
    errors: {
      data: { components: { '0': { components: [Object] } } }
    }
  },
  code: 50035,
  status: 400,
  method: 'POST',
  url: 'https://discord.com/api/v10/interactions/1133262297863827536/aW50ZXJhY3Rpb246MTEzMzI2MjI5Nzg2MzgyNzUzNjp1OWVQR2ZRS2p4Vm1TeWdjUGVGc05EM0l0aTNvb1ZMY054YWs1MnBFSnBMNnVtbHJGNkZBMU43aVY1WDRhNDlZNXQ0UmFRTE1jYWN4S0hoRmhJV3hEa3I3OVFnZVpicG9UcHN/callback'    
}

C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:640
      throw new DiscordAPIError(data, "code" in data ? data.code : data.error, status, method, url, requestData);
            ^

DiscordAPIError[50035]: Invalid Form Body
data.components[0].components[BASE_TYPE_BAD_LENGTH]: Must be between 1 and 1521 in length.
    at handleErrors (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:640:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async BurstHandler.runRequest (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:736:23)
    at async REST.request (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\rest\dist\index.js:1387:22)
    at async ButtonInteraction.showModal (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\discord.js\src\structures\interfaces\InteractionResponses.js:253:5)
    at async InteractionCollector.<anonymous> (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\src\commands\link.js:43:13) {
  requestBody: {
    files: undefined,
    json: {
      type: 9,
      data: {
        custom_id: 'editIDModal',
        title: 'EditID',
        components: [ { type: 1, data: [Object], components: [] } ]
      }
    }
  },
  rawError: {
    message: 'Invalid Form Body',
    code: 50035,
    errors: {
      data: { components: { '0': { components: [Object] } } }
    }
  },
  code: 50035,
  status: 400,
  method: 'POST',
  url: 'https://discord.com/api/v10/interactions/1133262297863827536/aW50ZXJhY3Rpb246MTEzMzI2MjI5Nzg2MzgyNzUzNjp1OWVQR2ZRS2p4Vm1TeWdjUGVGc05EM0l0aTNvb1ZMY054YWs1MnBFSnBMNnVtbHJGNkZBMU43aVY1WDRhNDlZNXQ0UmFRTE1jYWN4S0hoRmhJV3hEa3I3OVFnZVpicG9UcHN/callback'    
}

Unknown User•16mo ago

Message Not Public

Visual Studio CodeOP•16mo ago

C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@sapphire\shapeshift\dist\index.js:1715
    return typeof value === "string" ? Result.ok(value) : Result.err(new ValidationError("s.string", "Expected a string primitive", value));
                                                                     ^

ValidationError: Expected a string primitive
    at StringValidator.handle (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@sapphire\shapeshift\dist\index.js:1715:70)
    at StringValidator.parse (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@sapphire\shapeshift\dist\index.js:212:88)
    at validateRequiredParameters (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1064:18)
    at TextInputBuilder.toJSON (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1172:5)
    at C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1285:64
    at Array.map (<anonymous>)
    at ActionRowBuilder.toJSON (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1285:35)
    at C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1374:64
    at Array.map (<anonymous>)
    at ModalBuilder.toJSON (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1374:35) {
  validator: 's.string',
  given: undefined
}

C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@sapphire\shapeshift\dist\index.js:1715
    return typeof value === "string" ? Result.ok(value) : Result.err(new ValidationError("s.string", "Expected a string primitive", value));
                                                                     ^

ValidationError: Expected a string primitive
    at StringValidator.handle (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@sapphire\shapeshift\dist\index.js:1715:70)
    at StringValidator.parse (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@sapphire\shapeshift\dist\index.js:212:88)
    at validateRequiredParameters (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1064:18)
    at TextInputBuilder.toJSON (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1172:5)
    at C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1285:64
    at Array.map (<anonymous>)
    at ActionRowBuilder.toJSON (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1285:35)
    at C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1374:64
    at Array.map (<anonymous>)
    at ModalBuilder.toJSON (C:\Users\Aiden\Desktop\Projects\NodeJS\Discord\devbot\node_modules\@discordjs\builders\dist\index.js:1374:35) {
  validator: 's.string',
  given: undefined
}

Unknown User•16mo ago

Message Not Public

Visual Studio CodeOP•16mo ago

// Dependencies
const { ButtonBuilder, ButtonStyle, ModalBuilder, TextInputBuilder, TextInputStyle, ActionRowBuilder } = require("discord.js");

module.exports = async function (interaction) {
    // Variables
    let msg;
    let collector;

    // Buttons
    const editDataButton = new ButtonBuilder()
        .setCustomId("editDataButton")
        .setLabel("EditID")
        .setStyle(ButtonStyle.Primary);
    const editDataRow = new ActionRowBuilder().addComponents(editDataButton);

    // Modals
    const editIDModal = new ModalBuilder()
        .setCustomId("editIDModal")
        .setTitle("EditID")

    // Text Inputs
    const IDInput = new TextInputBuilder()
        .setCustomId("IDInput")
        .setPlaceholder("ID")
        .setStyle(TextInputStyle.Short)
        .setMinLength(1)
        .setMaxLength(20)
        .setRequired(true);
    const IDInputRow = new ActionRowBuilder().addComponents(IDInput);

    // Set Modal Components
    editIDModal.addComponents(IDInputRow);

    msg = await interaction.reply({
    content: "Please edit your account ID below.",
        ephemeral: true,
        components: [editDataRow],
    });

    collector = msg.createMessageComponentCollector();

    collector.on("collect", async (i) => {
        if (i.customId == "editDataButton") {
            await i.showModal(editIDModal)
        }
    });
};

// Dependencies
const { ButtonBuilder, ButtonStyle, ModalBuilder, TextInputBuilder, TextInputStyle, ActionRowBuilder } = require("discord.js");

module.exports = async function (interaction) {
    // Variables
    let msg;
    let collector;

    // Buttons
    const editDataButton = new ButtonBuilder()
        .setCustomId("editDataButton")
        .setLabel("EditID")
        .setStyle(ButtonStyle.Primary);
    const editDataRow = new ActionRowBuilder().addComponents(editDataButton);

    // Modals
    const editIDModal = new ModalBuilder()
        .setCustomId("editIDModal")
        .setTitle("EditID")

    // Text Inputs
    const IDInput = new TextInputBuilder()
        .setCustomId("IDInput")
        .setPlaceholder("ID")
        .setStyle(TextInputStyle.Short)
        .setMinLength(1)
        .setMaxLength(20)
        .setRequired(true);
    const IDInputRow = new ActionRowBuilder().addComponents(IDInput);

    // Set Modal Components
    editIDModal.addComponents(IDInputRow);

    msg = await interaction.reply({
    content: "Please edit your account ID below.",
        ephemeral: true,
        components: [editDataRow],
    });

    collector = msg.createMessageComponentCollector();

    collector.on("collect", async (i) => {
        if (i.customId == "editDataButton") {
            await i.showModal(editIDModal)
        }
    });
};

Oh wait I see I used setPlaceholder instead of setLabel on the text input Ok it's working now tyyy

Unknown User•16mo ago

Message Not Public

Gaming

Programming

Error when trying to show modal after clicking button.