ianstormtaylor/slate · error · Error

The <selection> hyperscript tag must have a <focus> tag as a

Error message

The <selection> hyperscript tag must have a <focus> tag as a child with `path` and `offset` attributes defined.

What it means

Thrown by the <selection> hyperscript tag when no <focus> child with both path and offset attributes was found. A Slate range needs both anchor and focus; hyperscript validates the focus point was fully specified.

Source

Thrown at packages/slate-hyperscript/src/creators.ts:171

 * Create a `Selection` object.
 */

export function createSelection(
  tagName: string,
  attributes: { [key: string]: any },
  children: any[]
): Range {
  const anchor: AnchorToken = children.find(c => c instanceof AnchorToken)
  const focus: FocusToken = children.find(c => c instanceof FocusToken)

  if (!anchor || anchor.offset == null || anchor.path == null) {
    throw new Error(
      `The <selection> hyperscript tag must have an <anchor> tag as a child with \`path\` and \`offset\` attributes defined.`
    )
  }

  if (!focus || focus.offset == null || focus.path == null) {
    throw new Error(
      `The <selection> hyperscript tag must have a <focus> tag as a child with \`path\` and \`offset\` attributes defined.`
    )
  }

  return {
    anchor: {
      offset: anchor.offset,
      path: anchor.path,
    },
    focus: {
      offset: focus.offset,
      path: focus.path,
    },
    ...attributes,
  }
}

/**

View on GitHub (pinned to 72a37c701e)

Solutions

1. Add <focus path={[...]} offset={n} /> inside <selection>
2. For collapsed selections use <cursor path={[...]} offset={n} /> instead of anchor/focus pairs

Example fix

// before
<selection>
  <anchor path={[0,0]} offset={0} />
</selection>
// after
<selection>
  <anchor path={[0,0]} offset={0} />
  <focus path={[0,0]} offset={0} />
</selection>

const hasFocus = children.some(c => c instanceof FocusToken && c.path != null && c.offset != null)
if (!hasFocus) throw new Error('fixture missing <focus path offset> in <selection>')

const isCompleteFocus = (f?: FocusToken): f is FocusToken =>
  !!f && f.path != null && f.offset != null

null

When it happens

Trigger: Writing <selection><anchor path={[0,0]} offset={0} /></selection> without a <focus/>, or a <focus/> missing path or offset.

Common situations: Test fixtures where only the anchor was written; forgetting that offset is required even for offset 0.

Related errors

• The <selection> hyperscript tag must have an <anchor> tag as
• The <text> hyperscript tag must only contain a single node's
• The <text> hyperscript tag can only contain text conten
• Slate hyperscript ranges must have both `<anchor />` and `<f
• Slate hyperscript ranges must have both `<anchor />` and `<f

AI-assisted analysis of ianstormtaylor/slate@72a37c701e (2026-08-27). Data as JSON: /api/errors/414e8ba98f5caf18. Report an issue: GitHub.