discordjs/discord.js · error · Error

Cannot properly serialize button with style: ${data.style}

Error message

Cannot properly serialize button with style: ${data.style}

What it means

createButtonBuilder dispatches on the button's `style` to pick the right ButtonBuilder subclass (Link, Premium, etc.). If the style value does not match any supported ButtonStyle, the default branch throws, which normally means the button data uses a style introduced after this library version was released.

Source

Thrown at packages/builders/src/components/Components.ts:262

}

function createButtonBuilder(data: APIButtonComponent): ButtonBuilder {
	switch (data.style) {
		case ButtonStyle.Primary:
			return new PrimaryButtonBuilder(data);
		case ButtonStyle.Secondary:
			return new SecondaryButtonBuilder(data);
		case ButtonStyle.Success:
			return new SuccessButtonBuilder(data);
		case ButtonStyle.Danger:
			return new DangerButtonBuilder(data);
		case ButtonStyle.Link:
			return new LinkButtonBuilder(data);
		case ButtonStyle.Premium:
			return new PremiumButtonBuilder(data);
		default:
			// @ts-expect-error This case can still occur if we get a newer unsupported button style
			throw new Error(`Cannot properly serialize button with style: ${data.style}`);
	}
}

export function resolveAccessoryComponent(component: APISectionAccessoryComponent) {
	switch (component.type) {
		case ComponentType.Button:
			return createButtonBuilder(component);
		case ComponentType.Thumbnail:
			return new ThumbnailBuilder(component);
		default:
			// @ts-expect-error This case can still occur if we get a newer unsupported component type
			throw new Error(`Cannot properly serialize section accessory component: ${component.type}`);
	}
}

View on GitHub (pinned to a81ed8a306)

Solutions

1. Update @discordjs/builders / discord.js to the newest version for support of new button styles.
2. Validate `style` against ButtonStyle before resolving and skip/ignore unsupported buttons.
3. Fix manually constructed button data to use a valid ButtonStyle value.
4. Check whether the payload came from a newer client/API and normalize it before building.

Example fix

// before
const btn = createButtonBuilder({ style: 42, ... }); // unknown style
// after
const btn = Object.values(ButtonStyle).includes(data.style) ? createButtonBuilder(data) : null;

if (!Object.values(ButtonStyle).includes(data.style)) {
  return null; // skip unsupported button
}

function isSupportedButtonStyle(s: number): s is ButtonStyle {
  return Object.values(ButtonStyle).includes(s as ButtonStyle);
}

try {
  const btn = createButtonBuilder(data);
} catch (err) {
  if ((err as Error).message.startsWith('Cannot properly serialize button')) {
    console.warn(`Unknown button style ${data.style}; skipping.`);
  } else throw err;
}

When it happens

Trigger: Resolving an APIButtonComponent whose `data.style` is a numeric value not present in the supported ButtonStyle set (newer API button style, or invalid style in hand-built component data).

Common situations: Receiving messages/interactions created by clients using newer button styles than the installed library supports; constructing button JSON manually with a wrong style number; stale library version after a Discord API update.

Related errors

• Cannot properly serialize component type: ${data.type}
• Cannot properly serialize section accessory component: ${com

AI-assisted analysis of discordjs/discord.js@a81ed8a306 (2026-08-30). Data as JSON: /api/errors/4d09e389a0e6bfa0. Report an issue: GitHub.