Skip to content

Container throws TypeError [ColorConvert] when accentColor is omitted (docs say optional) #617

@ItsRayanM

Description

@ItsRayanM

Bug Summary

<Container> crashes at runtime when accentColor is not provided, even though ContainerProps documents accentColor as optional.

This causes command execution to fail for any Components v2 message using <Container> without an explicit color.

Affected Version

  • commandkit: 1.2.0
  • discord.js: 14.25.1
  • Node.js: v24.12.0
  • OS: Windows 11 (NT 10.0.22631.0)

Minimal Reproduction

import { type ChatInputCommand, Container, TextDisplay } from 'commandkit';

export const command = {
  name: 'repro',
  description: 'Reproduce container accentColor crash',
};

export const chatInput: ChatInputCommand = async (ctx) => {
  const container = (
    <Container>
      <TextDisplay content="Container without accentColor" />
    </Container>
  );

  await ctx.interaction.reply({
    components: [container],
    flags: ['IsComponentsV2'],
  });
};
  1. Register and run /repro.
  2. Command fails with a runtime exception.

Actual Result

Command execution fails with:

TypeError [ColorConvert]: Unable to convert "undefined" to a number.
    at resolveColor (.../node_modules/discord.js/src/util/Util.js:299:11)
    at Container (.../node_modules/commandkit/src/components/display/container.ts:43:15)
    ...

Expected Result

If accentColor is omitted, <Container> should render normally without throwing.

Why This Seems Like a Framework Bug

The docs/API indicate accentColor is optional (accentColor?: ColorResolvable).

From observed behavior and stack trace, container logic appears to call resolveColor even when accentColor is undefined.

Suspected conditional issue in container implementation:

  • If code checks typeof props.accentColor != null, that condition is always true because typeof returns a string ("undefined", "string", etc.), never null.

Suggested Fix

Guard directly on the value, not typeof:

if (props.accentColor != null) {
  container.setAccentColor(resolveColor(props.accentColor));
}

Workaround (for users)

Pass accentColor explicitly on every <Container> until fixed.

Documentation Reference

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions