无法读取未定义的属性（读取“getTextInputValue”）Discord.js

Question

i have a problem when I use my commands modal on my discord bot

I don't know for what but this lines make conflicts :

const firstActionRow = new MessageActionRow().addComponents(favoriteColorInput);

this is the code of my command :

const {
    SlashCommandBuilder
  } = require('@discordjs/builders');
  
  const { MessageActionRow, Modal, TextInputComponent } = require('discord.js');

  module.exports = {
    data: new SlashCommandBuilder()
      .setName('modal')
      .setDescription('Site du serveur'),
    async execute(interaction, client) {

          // Create the modal
          const modal = new Modal()
            .setCustomId('myModal')
            .setTitle('My Modal');
          // Add components to modal
          // Create the text input components
          const favoriteColorInput = new TextInputComponent()
            .setCustomId('favoriteColorInput')
              // The label is the prompt the user sees for this input
            .setLabel("What's your favorite color?")
              // Short means only a single line of text
            .setStyle('SHORT');
          const hobbiesInput = new TextInputComponent()
            .setCustomId('hobbiesInput')
            .setLabel("What's some of your favorite hobbies?")
              // Paragraph means multiple lines of text.
            .setStyle('PARAGRAPH');
          // An action row only holds one text input,
          // so you need one action row per text input.
          const firstActionRow = new MessageActionRow().addComponents(favoriteColorInput);
          const secondActionRow = new MessageActionRow().addComponents(hobbiesInput);
          // Add inputs to the modal
          modal.addComponents(firstActionRow, secondActionRow);
          // Show the modal to the user
          await interaction.showModal(modal);
      
      
          if (!interaction.isModalSubmit()) return;
          // Get the data entered by the user
          const favoriteColor = interaction.fields.getTextInputValue('favoriteColorInput');
          const hobbies = interaction.fields.getTextInputValue('hobbiesInput');
          console.log({ favoriteColor, hobbies });
      
      
      
      
      
      
      
      
      const embed = new client.discord.MessageEmbed()
        .setColor('#9900ff')
        .setTitle(favoriteColor)
                .setURL('http://mirano-rp.com')
                .setAuthor('Mirano RP ™', 'https://i.imgur.com/uHh71VQ.png', 'http://mirano-rp.com')
                .setThumbnail('https://i.imgur.com/uHh71VQ.png')
                .setTimestamp()
        .setFooter(hobbies, 'https://i.imgur.com/PNK8rlZ.png');
        const row = new client.discord.MessageActionRow()
          .addComponents(
          new client.discord.MessageButton()
          
          .setLabel('Accéder au site !')
          .setEmoji('🛒')
          .setURL("http://mirano-rp.com")
          .setStyle('LINK'),
          );
  
      await interaction.reply({
        embeds: [embed],
        components: [row]
      });
    },
  };

I use : https://discordjs.guide/interactions/modals.html#building-and-responding-with-modals

my error :

TypeError: Cannot read properties of undefined (reading 'getTextInputValue')

Thanks you for you time and for your help !

PS : Sorry for my bad English

Answer 1

What your code does currently is that it shows the modal, then checks if the interaction which you received when the user ran the slash command was a modal submit. Instead, you need to create a new event listener for modal submits in the command by using client.on('interactionCreate') , then you need to check whether the interaction was a modal or not. This might be confusing to understand, so I have added the correct code:

const { SlashCommandBuilder } = require("@discordjs/builders");

const { MessageActionRow, Modal, TextInputComponent } = require("discord.js");

module.exports = {
  data: new SlashCommandBuilder()
    .setName("modal")
    .setDescription("Site du serveur"),
  async execute(interaction, client) {
    // Create the modal
    const modal = new Modal().setCustomId("myModal").setTitle("My Modal");
    // Add components to modal
    // Create the text input components
    const favoriteColorInput = new TextInputComponent()
      .setCustomId("favoriteColorInput")
      // The label is the prompt the user sees for this input
      .setLabel("What's your favorite color?")
      // Short means only a single line of text
      .setStyle("SHORT");
    const hobbiesInput = new TextInputComponent()
      .setCustomId("hobbiesInput")
      .setLabel("What's some of your favorite hobbies?")
      // Paragraph means multiple lines of text.
      .setStyle("PARAGRAPH");
    // An action row only holds one text input,
    // so you need one action row per text input.
    const firstActionRow = new MessageActionRow().addComponents(
      favoriteColorInput
    );
    const secondActionRow = new MessageActionRow().addComponents(hobbiesInput);
    // Add inputs to the modal
    modal.addComponents(firstActionRow, secondActionRow);
    // Show the modal to the user
    await interaction.showModal(modal);

    client.on('interactionCreate', (modalSubmit) => {
      if (!modalSubmit.isModalSubmit()) return;
      // Get the data entered by the user
      const favoriteColor = modalSubmit.fields.getTextInputValue("favoriteColorInput");
      const hobbies = modalSubmit.fields.getTextInputValue("hobbiesInput");
      console.log({ favoriteColor, hobbies });

      const embed = new client.discord.MessageEmbed()
        .setColor("#9900ff")
        .setTitle(favoriteColor)
        .setURL("http://mirano-rp.com")
        .setAuthor(
          "Mirano RP ™",
          "https://i.imgur.com/uHh71VQ.png",
          "http://mirano-rp.com"
        )
        .setThumbnail("https://i.imgur.com/uHh71VQ.png")
        .setTimestamp()
        .setFooter(hobbies, "https://i.imgur.com/PNK8rlZ.png");
      const row = new client.discord.MessageActionRow().addComponents(
        new client.discord.MessageButton()

          .setLabel("Accéder au site !")
          .setEmoji("🛒")
          .setURL("http://mirano-rp.com")
          .setStyle("LINK")
      );

      await modalSubmit.reply({
        embeds: [embed],
        components: [row],
      });
    })
  },
};

Answer 2

I test with that but this create another problem:

code : -

client.on('interactionCreate', (modalSubmit), async interaction => {

error :

/root/bot_adev/commands/modal.js:37
      if (!modalSubmit.isModalSubmit()) return;
      ^

ReferenceError: modalSubmit is not defined

Answer 3

now the entire code is :

const { SlashCommandBuilder } = require("@discordjs/builders");

const { MessageActionRow, Modal, TextInputComponent } = require("discord.js");

module.exports = {
  data: new SlashCommandBuilder()
    .setName("modal")
    .setDescription("Site du serveur"),
  async execute(interaction, client) {
    // Create the modal
    const modal = new Modal().setCustomId("myModal").setTitle("My Modal");
    // Add components to modal
    // Create the text input components
    const favoriteColorInput = new TextInputComponent()
      .setCustomId("favoriteColorInput")
      // The label is the prompt the user sees for this input
      .setLabel("What's your favorite color?")
      // Short means only a single line of text
      .setStyle("SHORT");
    const hobbiesInput = new TextInputComponent()
      .setCustomId("hobbiesInput")
      .setLabel("What's some of your favorite hobbies?")
      // Paragraph means multiple lines of text.
      .setStyle("PARAGRAPH");
    // An action row only holds one text input,
    // so you need one action row per text input.
    const firstActionRow = new MessageActionRow().addComponents(
      favoriteColorInput
    );
    const secondActionRow = new MessageActionRow().addComponents(hobbiesInput);
    // Add inputs to the modal
    modal.addComponents(firstActionRow, secondActionRow);
    // Show the modal to the user
    await interaction.showModal(modal);

    
    client.on('interactionCreate', async (modalSubmit) => {
      if (modalSubmit.isModalSubmit()) return;
      // Get the data entered by the user
      const favoriteColor = modalSubmit.fields.getTextInputValue("favoriteColorInput");
      const hobbies = modalSubmit.fields.getTextInputValue("hobbiesInput");
      console.log({ favoriteColor, hobbies });

      const embed = new client.discord.MessageEmbed()
        .setColor("#9900ff")
        .setTitle(favoriteColor)
        .setURL("http://mirano-rp.com")
        .setAuthor(
          "Mirano RP ™",
          "https://i.imgur.com/uHh71VQ.png",
          "http://mirano-rp.com"
        )
        .setThumbnail("https://i.imgur.com/uHh71VQ.png")
        .setTimestamp()
        .setFooter(hobbies, "https://i.imgur.com/PNK8rlZ.png");
      const row = new client.discord.MessageActionRow().addComponents(
        new client.discord.MessageButton()

          .setLabel("Accéder au site !")
          .setEmoji("🛒")
          .setURL("http://mirano-rp.com")
          .setStyle("LINK")
      );
      

      await modalSubmit.reply({
        embeds: [embed],
        components: [row],
      });
      
    });
  },
};

no error in console but also an error on discord .....