Corrigir Layout do Container do Componente v2 do Bot do Discord Não Renderizando Corretamente

Ao criar bots do Discord com o sistema de layout Component v2, você pode notar que elementos de container como Action Rows, Section ou Embed não exibem corretamente. O layout pode aparecer colapsado, desalinhado ou totalmente ausente. Este problema geralmente decorre de regras de aninhamento incorretas ou campos obrigatórios ausentes no payload JSON. Este artigo explica a causa raiz das falhas de renderização em containers do Component v2 e fornece etapas precisas para corrigir o layout.

Por que o layout do container do Component v2 do bot do Discord falha

O sistema Component v2 do Discord usa um esquema JSON estrito para definir componentes de mensagem. Cada container deve seguir regras exatas de aninhamento e campos. A causa mais comum de falha de layout é um valor inválido de type ou campos obrigatórios ausentes em um objeto container. Por exemplo, um container Action Row requer type: 1 e um array components. Se você definir type: 2 (Button) no container externo, o Discord ignora todo o payload e nada renderiza.

Outro problema frequente é exceder a profundidade máxima de aninhamento. O Component v2 permite no máximo 5 Action Rows por mensagem. Cada Action Row pode conter até 5 componentes interativos (botões, menus de seleção ou entradas de texto). Se seu código adicionar uma sexta Action Row, o Discord descarta silenciosamente as linhas extras, deixando o layout parcialmente ausente.

Containers Section, introduzidos no Component v2, exigem tanto um objeto accessory quanto uma string content. Se você omitir o campo accessory, o container Section não renderiza. Da mesma forma, o campo content deve ser uma string não vazia. Uma string vazia ou campo ausente aciona um erro de validação, e a mensagem inteira pode falhar ao ser enviada.

Etapas para corrigir a renderização do layout do container do Component v2

1. Verifique o tipo do container externo
   Abra o código do seu bot e localize o JSON do componente da mensagem. Certifique-se de que o container mais externo tenha type: 1 para Action Row. Por exemplo: { "type": 1, "components": [...] }. Se você estiver usando um container Section, defina type: 4.
2. Verifique o comprimento do array components
   Conte o número de objetos dentro do array components de cada Action Row. O limite é de 5 itens por linha. Reduza ou divida os itens em Action Rows adicionais se exceder 5. Use um loop para agrupar itens, se necessário.
3. Valide campos obrigatórios para containers Section
   Se você estiver usando um container Section (type: 4), confirme que o objeto inclui tanto content (string) quanto accessory (objeto). O objeto accessory deve ter seu próprio type e array components válidos. Exemplo: { "type": 4, "content": "Olá", "accessory": { "type": 1, "components": [...] } }.
4. Teste com um payload mínimo
   Crie um comando de teste que envie uma única Action Row com um Button. Use este payload mínimo: { "type": 1, "components": [ { "type": 2, "label": "Clique", "style": 1, "custom_id": "teste" } ] }. Se isso renderizar corretamente, seu payload original tem erros estruturais. Gradualmente, adicione componentes de volta para isolar o problema.
5. Verifique caracteres invisíveis em custom_id
   Inspecione o campo custom_id em busca de espaços em branco ocultos ou caracteres especiais. A API do Discord rejeita caracteres inválidos. Use um editor hexadecimal ou uma ferramenta de inspeção de string para garantir que o custom_id contenha apenas caracteres alfanuméricos, sublinhados ou hífens.
6. Revise o campo flags da mensagem
   Se sua mensagem usar flags: 64 (efêmera), certifique-se de que o container do componente não contenha tipos não suportados, como Text Input em mensagens efêmeras. O Discord não renderiza Text Input em mensagens efêmeras, fazendo o container colapsar.

Se o layout do bot do Discord ainda tiver problemas após a correção principal

Action Row aparece vazia quando enviada

Um array components vazio dentro de uma Action Row faz o Discord ignorar a linha inteira. Certifique-se de que cada Action Row tenha pelo menos um componente filho. Se seu bot gerar componentes dinamicamente, adicione uma verificação: if (components.length === 0) return; para pular o envio de linhas vazias.

Opções do menu de seleção não aparecem

Containers Select Menu exigem um array options com pelo menos um objeto. Cada opção deve ter campos label e value. Se você omitir value, o menu renderiza sem itens. Verifique se a string placeholder tem menos de 150 caracteres.

Componentes Text Input estão ausentes do formulário

Text Input (type: 4) só pode aparecer dentro de um modal, não em uma mensagem comum. Se você colocar um Text Input dentro de uma Action Row em uma mensagem comum, o Discord descarta todo o componente. Mova Text Input para um modal usando InteractionResponseType.Modal.

Containers Embed não renderizam no celular

Containers Embed usam o array embeds, não o array components. Se você colocar erroneamente um objeto embed dentro de um container Component v2, o embed não renderizará em clientes móveis. Mantenha embeds no array embeds de nível superior e componentes no array components.

Tipos de container do Component v2: Action Row vs Section vs Button

Item	Action Row (type: 1)	Section (type: 4)
Propósito	Agrupa componentes interativos como botões e menus de seleção	Exibe conteúdo estruturado com um acessório opcional
Campos obrigatórios	type e array components	type, content e objeto accessory
Máximo de filhos	5 componentes por linha	1 componente acessório
Erro comum	Array components vazio ou valor type errado	accessory ausente ou string content vazia

Agora você tem as etapas exatas para corrigir a renderização do layout do container do Component v2 do bot do Discord. Comece validando o campo type e a estrutura do array components. Use o teste de payload mínimo para isolar erros. Para bots avançados, adicione registro que exiba o JSON completo do componente antes de enviar para a API. Essa prática ajuda a capturar payloads inválidos durante o desenvolvimento.