Problem with Modal Builders

node:events:497
throw er; // Unhandled 'error' event
^

DiscordAPIError[50035]: Invalid Form Body
data.custom_id[BASE_TYPE_REQUIRED]: This field is required
data.title[BASE_TYPE_REQUIRED]: This field is required
data.components[BASE_TYPE_REQUIRED]: This field is required
at handleErrors (/Users/nils/development/discord-bot/node_modules/@discordjs/rest/dist/index.js:722:13)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async BurstHandler.runRequest (/Users/nils/development/discord-bot/node_modules/@discordjs/rest/dist/index.js:826:23)
at async _REST.request (/Users/nils/development/discord-bot/node_modules/@discordjs/rest/dist/index.js:1266:22)
at async ButtonInteraction.showModal (/Users/nils/development/discord-bot/node_modules/discord.js/src/structures/interfaces/InteractionResponses.js:253:5)
at async Client.<anonymous> (/Users/nils/development/discord-bot/src/index.js:82:3)
Emitted 'error' event on Client instance at:
at emitUnhandledRejectionOrErr (node:events:402:10)
at process.processTicksAndRejections (node:internal/process/task_queues:84:21) {
requestBody: { files: undefined, json: { type: 9, data: {} } },
rawError: {
message: 'Invalid Form Body',
code: 50035,
errors: {
data: {
custom_id: { _errors: [ [Object] ] },
title: { _errors: [ [Object] ] },
components: { _errors: [ [Object] ] }
}
}
},
code: 50035,
status: 400,
method: 'POST',
}

async function openVerifyModal() {
    const modal = new ModalBuilder()
        .setCustomId('verify_modal')
        .setTitle('Verifizierung');

    const firstName = new TextInputBuilder()
        .setCustomId('verify_modal_first_name')
        .setLabel('Vorname')
        .setPlaceholder('Mazhor')
        .setStyle('Short');

    const lastName = new TextInputBuilder()
        .setCustomId('verify_modal_last_name')
        .setLabel('Nachname')
        .setPlaceholder('Gaming')
        .setStyle('Short');

    const id = new TextInputBuilder()
        .setCustomId('verify_modal_id')
        .setLabel('GID')
        .setPlaceholder('1')
        .setStyle('Short');

    const actionRow = new ActionRowBuilder()
        .addComponents(firstName);

    const secondActionRow = new ActionRowBuilder()
        .addComponents(lastName);

    const thirdActionRow = new ActionRowBuilder()
        .addComponents(id);

    modal.addComponents(actionRow, secondActionRow, thirdActionRow);

    return modal;
}
client.on(Events.InteractionCreate, async interaction => {
    if (!interaction.isButton()) return;

    if (interaction.customId === 'verify_button') {
        console.log('Opening verify modal...');
        console.log(openVerifyModal());
        await interaction.showModal(openVerifyModal());
    }
});
why this wont work?
Was this page helpful?