{"record":{"id":"6ba335080d0d7aff","repo":"GrapesJS/grapesjs","slug":"target-option-is-required","errorCode":null,"errorMessage":"Target option is required","messagePattern":"Target option is required","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/core/src/commands/view/ComponentDrag.ts","lineNumber":48,"sourceCode":"  elGuideInfoY?: HTMLElement;\n  elGuideInfoContentX?: HTMLElement;\n  elGuideInfoContentY?: HTMLElement;\n  dragger?: Dragger;\n\n  run(editor: Editor, _sender: any, opts = {} as ComponentDragOpts) {\n    bindAll(\n      this,\n      'setPosition',\n      'onStart',\n      'onDrag',\n      'onEnd',\n      'getPosition',\n      'getGuidesStatic',\n      'renderGuide',\n      'getGuidesTarget',\n    );\n\n    if (!opts.target) throw new Error('Target option is required');\n\n    const config = {\n      doc: opts.target.getEl()?.ownerDocument,\n      onStart: this.onStart,\n      onEnd: this.onEnd,\n      onDrag: this.onDrag,\n      getPosition: this.getPosition,\n      setPosition: this.setPosition,\n      guidesStatic: () => this.guidesStatic ?? [],\n      guidesTarget: () => this.guidesTarget ?? [],\n      ...(opts.dragger ?? {}),\n    };\n    this.setupGuides();\n    this.opts = opts;\n    this.editor = editor;\n    this.em = editor.getModel();\n    this.target = opts.target;\n    this.isTran = opts.mode == 'translate';","sourceCodeStart":30,"sourceCodeEnd":66,"githubUrl":"https://github.com/GrapesJS/grapesjs/blob/2bdeda85b82b8b9ceae42fd6558cbbcae5ec2d21/packages/core/src/commands/view/ComponentDrag.ts#L30-L66","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Pass the component as `target` in the options: `editor.Commands.run('drag', { target: editor.getSelected() })`.","Verify the component exists before running (e.g. `editor.getSelected()` is not undefined because the canvas has no selection).","If you do not need programmatic dragging, use built-in drag interactions or the default toolbar instead of invoking ComponentDrag directly."],"exampleFix":"// before\neditor.Commands.run('drag', { event });\n// after\nconst target = editor.getSelected();\nif (target) editor.Commands.run('drag', { target, event });","handlingStrategy":"validation","validationCode":"const target = editor.getSelected();\nif (!target) throw new Error('Cannot drag: no selected component');\neditor.Commands.run('drag', { target, event });","typeGuard":"function hasTarget(opts) {\n  return !!opts && typeof opts === 'object' && 'target' in opts && opts.target != null;\n}","tryCatchPattern":"try {\n  editor.Commands.run('drag', { target });\n} catch (err) {\n  if (err.message === 'Target option is required') {\n    console.warn('Drag skipped: no target component available');\n  } else throw err;\n}","preventionTips":["Always fetch a live component (getSelected/getComponent) before invoking drag-style commands","Assert options before calling internal commands","Prefer public editor APIs over instantiating internal classes like ComponentDrag"],"tags":["grapesjs","missing-option","api-misuse","canvas"],"backgroundTag":"missing-required-option","analyzedSha":"2bdeda85b82b8b9ceae42fd6558cbbcae5ec2d21","analyzedAt":"2026-08-30T11:47:52.267Z","schemaVersion":2},"datasetVersion":"2026-08-30T13:17:10.514Z"}