discord.js - Imagine ❄•2y 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•2y 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!

qvgkOP•2y 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•2y ago

Message Not Public

qvgkOP•2y 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•2y ago

Message Not Public

qvgkOP•2y 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•2y ago

Message Not Public

qvgkOP•2y 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•2y ago

Message Not Public

Gaming

Programming

Error when trying to show modal after clicking button.