Code Connect throws errors in Figma UI after validating with the CLI

[JamesIves]

Code connect seems to throw errors after the CLI has validated it's files and provides no clear directions on what is happening or ways to resolve them. Here's my figma.config.json file.

{
  "codeConnect": {
    "include": ["src/components/**/*", "src/components/**/*.figma.*"],
    "parser": "html",
    "importPaths": {
      "components/**/*": "components"
    },
    "paths": {
      "components": ["src/components"]
    },
    "documentUrlSubstitutions": {}
  }
}

Both examples were published with the publish command and are web components.

/packages/components/src/components/blz-card/blz-card.figma.ts
/packages/components/src/components/blz-banner/blz-banner.figma.ts

Validating Code Connect files...
All Code Connect files are valid (12873ms)
Uploading to Figma...
uploading to https://api.figma.com/v1/code_connect
Successfully uploaded to Figma, for Web Components:

• Code Connect CLI version: v1.4.2
• Operating system: MacOS

Card

Here's the *figma.ts version of my card component:

import figma, {html} from '@figma/code-connect/html';

figma.connect(
  'https://www.figma.com/design/XXX',
  {
    props: {
      orientation: figma.enum('Orientation', {
        Vertical: 'vertical',
        Horizontal: 'horizontal',
      }),
      order: figma.enum('Order', {Default: 'default', Reverse: 'reverse'}),
      backplate: figma.enum('↳ Backplate', {True: 'true', False: 'false'}),
      media: figma.children('.Card/Media'),
      footer: figma.slot('↳ 🧩 Footer'),
    },
    imports: [
      "import '@blizzard/forge-components/components/blz-card/blz-card.js'",
    ],
    example: props =>
      html`<blz-card
        orientation="${props.orientation}"
        order="${props.order}"
        backplate="${props.backplate}"
      >
        <div slot="media">${props.media}</div>
        <div slot="footer">${props.footer}</div>
      </blz-card>`,
  },
);

And the structure in Figma:

For some reason I get an error on Footer despite the names matching:

Banner

In the case of my banner component the entire code connect samples errors.

import figma, {html} from '@figma/code-connect/html';

figma.connect(
  'https://www.figma.com/design/XXX',
  {
    props: {
      'auto-gradient': figma.boolean('Auto Gradient'),
      height: figma.enum('Height', {"Fixed":"fixed","Flex":"flex"}),
    },
    imports: ["import '@blizzard/forge-components/components/blz-banner/blz-banner.js'"],
    example: props =>
      html`<blz-banner auto-gradient="${props['auto-gradient']}" height="${props.height}">
      </blz-banner>`,
  },
);