GrapesJS/grapesjs · error

Target option is required

Error message

Target option is required

What it means

GrapesJS's ComponentDrag (drag/move logic for canvas components) requires the caller to pass a `target` in its options; the target is the component being dragged and is used to resolve the document and guide rendering. If `opts.target` is missing the class cannot operate, so it throws immediately before configuring the Dragger.

Source

Thrown at packages/core/src/commands/view/ComponentDrag.ts:48

  elGuideInfoY?: HTMLElement;
  elGuideInfoContentX?: HTMLElement;
  elGuideInfoContentY?: HTMLElement;
  dragger?: Dragger;

  run(editor: Editor, _sender: any, opts = {} as ComponentDragOpts) {
    bindAll(
      this,
      'setPosition',
      'onStart',
      'onDrag',
      'onEnd',
      'getPosition',
      'getGuidesStatic',
      'renderGuide',
      'getGuidesTarget',
    );

    if (!opts.target) throw new Error('Target option is required');

    const config = {
      doc: opts.target.getEl()?.ownerDocument,
      onStart: this.onStart,
      onEnd: this.onEnd,
      onDrag: this.onDrag,
      getPosition: this.getPosition,
      setPosition: this.setPosition,
      guidesStatic: () => this.guidesStatic ?? [],
      guidesTarget: () => this.guidesTarget ?? [],
      ...(opts.dragger ?? {}),
    };
    this.setupGuides();
    this.opts = opts;
    this.editor = editor;
    this.em = editor.getModel();
    this.target = opts.target;
    this.isTran = opts.mode == 'translate';

View on GitHub (pinned to 2bdeda85b8)

Solutions

1. Pass the component as `target` in the options: `editor.Commands.run('drag', { target: editor.getSelected() })`.
2. Verify the component exists before running (e.g. `editor.getSelected()` is not undefined because the canvas has no selection).
3. If you do not need programmatic dragging, use built-in drag interactions or the default toolbar instead of invoking ComponentDrag directly.

Example fix

// before
editor.Commands.run('drag', { event });
// after
const target = editor.getSelected();
if (target) editor.Commands.run('drag', { target, event });

const target = editor.getSelected();
if (!target) throw new Error('Cannot drag: no selected component');
editor.Commands.run('drag', { target, event });

function hasTarget(opts) {
  return !!opts && typeof opts === 'object' && 'target' in opts && opts.target != null;
}

try {
  editor.Commands.run('drag', { target });
} catch (err) {
  if (err.message === 'Target option is required') {
    console.warn('Drag skipped: no target component available');
  } else throw err;
}

When it happens

Trigger: Constructing/running ComponentDrag (directly or via internal commands) without `opts.target`, e.g. calling the `drag` command or instantiating ComponentDrag with `{}` or options missing the target component, or passing a target that resolves to undefined after destructuring.

Common situations: Custom drag implementations triggering the internal `drag`/`move` command programmatically without setting a target; custom UI buttons that start component dragging; tests calling `editor.Commands.run('drag')` without the required options.

Related errors

• Cannot remove immutable record
• 'container' is required
• Cannot modify immutable record
• Parser code "${parserCode}" not found
• Plugin ${explicitId} not found

AI-assisted analysis of GrapesJS/grapesjs@2bdeda85b8 (2026-08-30). Data as JSON: /api/errors/6ba335080d0d7aff. Report an issue: GitHub.