Skip to content

Token group containing children keyed "name" and "value" is misidentified as a single token, causing UI render crash #3856

@UdayHyma

Description

@UdayHyma

Describe the bug

The plugin fails to render tokens with the error t.name.split is not a function when a token group in the JSON contains two child tokens whose keys are "name" and "value" at the same level. The parser handles the JSON correctly, but the UI's isSingleToken heuristic in src/utils/is/isSingleToken.ts then misidentifies the parent group as a single token (because the group itself ends up with name and value as direct properties via the lodash-set tree rebuild in createTokenObj), and a downstream useMemo calls .split on what it thinks is a string but is actually a child token object.

Reported by a customer. Reproduced 100% on production v2.11.5.

To Reproduce

Steps to reproduce the behavior:

  1. Host the JSON from the "JSON" section below on a public URL (e.g. a public GitHub Gist).
  2. In the plugin: Settings → Add new sync → URL.
  3. Paste the raw URL and click Save.
  4. Plugin renders nothing and shows the "An unexpected error has occurred — t.name.split is not a function" screen. Console shows a React ErrorBoundary stack trace pointing at useMemo (not the parser).

Expected behavior

A token group containing children keyed "name" and "value" should be rendered as a group (recursing into the children), not misidentified as a single token. Either the isSingleToken check should be tightened (e.g. require typeof token.name === 'string' or also require 'type' in token), or the tree rebuild in createTokenObj should not produce intermediate nodes that satisfy the current check.

Screenshots or Screencasts

Image

JSON (optional)

{
  "included-link": {
    "contract": {
      "chip": {
        "text": {
          "label": {
            "default": { "value": { "fontFamily": "Inter" }, "type": "typography" },
            "link":    { "value": { "fontFamily": "Inter" }, "type": "typography" },
            "name":    { "value": { "fontFamily": "Inter" }, "type": "typography" },
            "thin":    { "value": { "fontFamily": "Inter" }, "type": "typography" },
            "value":   { "value": { "fontFamily": "Inter" }, "type": "typography" }
          }
        }
      }
    }
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    📥 Triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions