#Unable to Show Modal

8 messages · Page 1 of 1 (latest)

opal dome
#

I'm currently trying to show a basic modal to users after they select an option from a drop down menu. Currently, I seem to be running into an error with this line: return interaction.showModal(modal);, and I'm not really sure how to interpret my console errors beyond "something is wrong with the fields I'm adding to TextInputBuilder."

In VS Code, I am seeing that .setLabel is marked as deprecated, but it also seems to be what the Discord.js documentation indicates I should be using? Any help would be appreciated!

Below I'm including the snippet of code that seems to be the issue, my console log errors, and my package.json:

Problematic Code:

console.log("Attempting to show modal for community note...");
const modal = new ModalBuilder()
    .setCustomId(`noteModal:${noteId}`)
    .setTitle('Enter Your Note');

const noteInput = new TextInputBuilder()
    .setCustomId('noteContentInput')
    .setLabel('Note Content')
    .setValue('Note Content')
    .setPlaceholder('Explain the missing context…')
    .setStyle(TextInputStyle.Paragraph)
    .setRequired(true);

console.log(noteInput);

const row = new ActionRowBuilder().addComponents(noteInput);

console.log('Here lies Row:', row.components);
modal.setLabelComponents(row);

try {
    console.log(modal);
    return interaction.showModal(modal);
} catch (modalErr) {
    console.error('Error showing modal:', modalErr);
    return interaction.reply({
        content: 'There was an error displaying the note input modal.',
        ephemeral: true
    });
}```
static socketBOT
opal dome
#

package.json

{
  "name": "soupbot",
  "version": "3",
  "server_version": "9.6",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Kermit the Frog",
  "license": "ISC",
  "dependencies": {
    "discord.js": "^14.25.0",
    "dotenv": "^16.4.5",
    "moment-timezone": "^0.5.45",
    "nodemon": "^3.1.4",
    "uuid": "^13.0.0"
  }
}
mild patioBOT
scarlet dock
#

Action rows are deprecated in modals now

bitter sail
#

You need to add a LabelBuilder instead

opal dome
#

This was indeed the issue, thanks! For anyone curious what the solution was, here's what I ended up with:

const targetMessageChannel = await client.channels.fetch(pending.channelId);
                const targetMessage = await targetMessageChannel.messages.fetch(pending.messageId);

                const truncatedContent = targetMessage.content.length > 100 ? targetMessage.content.slice(0, 98) + '…' : targetMessage.content;
                
                const modal = new ModalBuilder()
                    .setCustomId(`noteModal:${noteId}`)
                    .setTitle('✏️ Draft Community Note');

                const contextInput = new TextInputBuilder() 
                    .setCustomId('noteContentInput')
                    .setStyle(TextInputStyle.Paragraph)
                    .setPlaceholder('Add context or information relevant to this message. Provide sources if possible.')
                    .setRequired(true)
                    .setMaxLength(2048);

                const communityLabel = new LabelBuilder()
                    .setLabel(`Add context to this message:`)
                    .setDescription(truncatedContent)
                    .setTextInputComponent(contextInput);
                
                modal.addLabelComponents(communityLabel);
                
                return interaction.showModal(modal);
            }```