Error when creating a modal
Can someone help me figure the cause of this error, heres my code below and the error.
Code:
Error:
const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');
const { ActionRowBuilder, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
module.exports = class CreateEmbed extends InteractionHandler {
constructor(ctx, options) {
super(ctx, {
...options,
interactionHandlerType: InteractionHandlerTypes.Button
});
};
async run(interaction, result) {
await interaction.showModal(result);
}
async parse(interaction) {
if (interaction.customId !== 'setupEmbedBtn') {
console.log(interaction.customId)
this.none();
}
try {
const modal = new ModalBuilder()
.setCustomId('setupEmbedMdl')
.setTitle('Setup Embed')
const embedGeneratorInput = new TextInputBuilder()
.setCustomId('embedGeneratorInput')
.setLabel('Pase the json code here or the url')
.setMaxLength(4000)
.setStyle(TextInputStyle.Paragraph)
.setRequired(true);
const firstActionRow = new ActionRowBuilder()
.addComponents(embedGeneratorInput);
modal.addComponents(firstActionRow);
this.some(modal)
} catch (err) {
console.log(err)
}
}
}
const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');
const { ActionRowBuilder, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
module.exports = class CreateEmbed extends InteractionHandler {
constructor(ctx, options) {
super(ctx, {
...options,
interactionHandlerType: InteractionHandlerTypes.Button
});
};
async run(interaction, result) {
await interaction.showModal(result);
}
async parse(interaction) {
if (interaction.customId !== 'setupEmbedBtn') {
console.log(interaction.customId)
this.none();
}
try {
const modal = new ModalBuilder()
.setCustomId('setupEmbedMdl')
.setTitle('Setup Embed')
const embedGeneratorInput = new TextInputBuilder()
.setCustomId('embedGeneratorInput')
.setLabel('Pase the json code here or the url')
.setMaxLength(4000)
.setStyle(TextInputStyle.Paragraph)
.setRequired(true);
const firstActionRow = new ActionRowBuilder()
.addComponents(embedGeneratorInput);
modal.addComponents(firstActionRow);
this.some(modal)
} catch (err) {
console.log(err)
}
}
}
Solution:Jump to solution
i used
createMessageComponentCollector() instead of doing it all in the button interaction handler7 Replies
Error:
You're not returning the
none or somestill same error when i add it
const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');
const { ActionRowBuilder, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
module.exports = class CreateEmbed extends InteractionHandler {
constructor(ctx, options) {
super(ctx, {
...options,
interactionHandlerType: InteractionHandlerTypes.Button
});
};
async run(interaction, result) {
await interaction.showModal(result);
}
async parse(interaction) {
if (interaction.customId !== 'setupEmbedBtn') {
console.log(interaction.customId)
return this.none();
}
try {
const modal = new ModalBuilder()
.setCustomId('setupEmbedMdl')
.setTitle('Setup Embed')
const embedGeneratorInput = new TextInputBuilder()
.setCustomId('embedGeneratorInput')
.setLabel('Pase the json code here or the url')
.setMaxLength(3000)
.setStyle(TextInputStyle.Paragraph)
.setRequired(true);
const firstActionRow = new ActionRowBuilder()
.addComponents(embedGeneratorInput);
modal.addComponents(firstActionRow);
return this.some(modal)
} catch (err) {
console.log(err)
}
}
}
const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');
const { ActionRowBuilder, ModalBuilder, TextInputBuilder, TextInputStyle } = require('discord.js');
module.exports = class CreateEmbed extends InteractionHandler {
constructor(ctx, options) {
super(ctx, {
...options,
interactionHandlerType: InteractionHandlerTypes.Button
});
};
async run(interaction, result) {
await interaction.showModal(result);
}
async parse(interaction) {
if (interaction.customId !== 'setupEmbedBtn') {
console.log(interaction.customId)
return this.none();
}
try {
const modal = new ModalBuilder()
.setCustomId('setupEmbedMdl')
.setTitle('Setup Embed')
const embedGeneratorInput = new TextInputBuilder()
.setCustomId('embedGeneratorInput')
.setLabel('Pase the json code here or the url')
.setMaxLength(3000)
.setStyle(TextInputStyle.Paragraph)
.setRequired(true);
const firstActionRow = new ActionRowBuilder()
.addComponents(embedGeneratorInput);
modal.addComponents(firstActionRow);
return this.some(modal)
} catch (err) {
console.log(err)
}
}
}
Also return it in the catch block, just in case
you could also make the modal in the run method, not outside it
aight so after like a 3 hours of debugging finnaly know what causing it:
So even when i clicked the button that has the unique id of
and anyways i can improve this code?
fixed it, my shitty code is the problem
setupEmbedBtn it still wont work because the interaction in the above code is old, and so it returns the this.none(), i havent setup a error handler for that thats why i think it returns the error
Why i say its old because in my other button interaction handler code, i use the interaction.update() method to edit the embed and components, but i think in the above code its still getting the interaction before i use the interaction.update()
So now my problem is how can i get the new interaction, which will i get after i use the interaction.update()?
heres the code i mentioned that use the interaction.update():
const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');
const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');
module.exports = class SetupCommand extends InteractionHandler {
constructor(ctx, options) {
super(ctx, {
...options,
interactionHandlerType: InteractionHandlerTypes.Button
});
}
async run(interaction, result) {
await interaction.update({ embeds: [result.embed], components: [result.row] });
}
async parse(interaction) {
const customId = interaction.customId;
if (customId.startsWith('createPanelBtn')) {
return this.some(this.getType('setupEmbed')) // Step 1: Create panel name
} else if (customId.startsWith('goBackBtn')) { // Go to previous step
return this.some(this.getType('goBack', 'intro'))
}
this.none()
}
getType(type, step = null) {
if (type === 'intro') {
const embed = new EmbedBuilder()
.setTitle('TItle about explaining the thing')
.setDescription('Some text here explaining things')
.setColor('Blue');
const createPanel = new ButtonBuilder()
.setCustomId('createPanelBtn')
.setLabel('Create A Panel')
.setStyle(ButtonStyle.Secondary);
return {
embed,
row: new ActionRowBuilder()
.addComponents(createPanel)
};
} else if (type === 'setupEmbed') {
const embed = new EmbedBuilder()
.setTitle('Step 1: Setting Up the embed')
.setDescription('Setting up the embed?');
const setupEmbedBtn = new ButtonBuilder()
.setCustomId('setupEmbedBtn')
.setLabel('Setup Panel Content')
.setStyle(ButtonStyle.Secondary);
const continuePanelBtn = new ButtonBuilder()
.setCustomId('continuePanelBtn')
.setLabel('Save & Continue')
.setStyle(ButtonStyle.Success);
const goBackBtn = new ButtonBuilder()
.setCustomId('goBackBtn')
.setLabel('Back')
.setStyle(ButtonStyle.Secondary);
return {
embed,
row: new ActionRowBuilder()
.addComponents(goBackBtn, setupEmbedBtn, continuePanelBtn)
};
} else if (type === 'goBack' && step !== null) {
let data;
switch (step) {
case 'intro':
data = this.getType('intro')
break;
case 'step1':
data = this.getType('setupEmbed')
break;
default:
return this.none();
}
return data
}
}
}
const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');
const { EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle } = require('discord.js');
module.exports = class SetupCommand extends InteractionHandler {
constructor(ctx, options) {
super(ctx, {
...options,
interactionHandlerType: InteractionHandlerTypes.Button
});
}
async run(interaction, result) {
await interaction.update({ embeds: [result.embed], components: [result.row] });
}
async parse(interaction) {
const customId = interaction.customId;
if (customId.startsWith('createPanelBtn')) {
return this.some(this.getType('setupEmbed')) // Step 1: Create panel name
} else if (customId.startsWith('goBackBtn')) { // Go to previous step
return this.some(this.getType('goBack', 'intro'))
}
this.none()
}
getType(type, step = null) {
if (type === 'intro') {
const embed = new EmbedBuilder()
.setTitle('TItle about explaining the thing')
.setDescription('Some text here explaining things')
.setColor('Blue');
const createPanel = new ButtonBuilder()
.setCustomId('createPanelBtn')
.setLabel('Create A Panel')
.setStyle(ButtonStyle.Secondary);
return {
embed,
row: new ActionRowBuilder()
.addComponents(createPanel)
};
} else if (type === 'setupEmbed') {
const embed = new EmbedBuilder()
.setTitle('Step 1: Setting Up the embed')
.setDescription('Setting up the embed?');
const setupEmbedBtn = new ButtonBuilder()
.setCustomId('setupEmbedBtn')
.setLabel('Setup Panel Content')
.setStyle(ButtonStyle.Secondary);
const continuePanelBtn = new ButtonBuilder()
.setCustomId('continuePanelBtn')
.setLabel('Save & Continue')
.setStyle(ButtonStyle.Success);
const goBackBtn = new ButtonBuilder()
.setCustomId('goBackBtn')
.setLabel('Back')
.setStyle(ButtonStyle.Secondary);
return {
embed,
row: new ActionRowBuilder()
.addComponents(goBackBtn, setupEmbedBtn, continuePanelBtn)
};
} else if (type === 'goBack' && step !== null) {
let data;
switch (step) {
case 'intro':
data = this.getType('intro')
break;
case 'step1':
data = this.getType('setupEmbed')
break;
default:
return this.none();
}
return data
}
}
}
Solution
i used
createMessageComponentCollector() instead of doing it all in the button interaction handler