Symfony UX Cropper组件报错：Stimulus控制器连接失败求助

错误详情 #

Error connecting controller
TypeError: expected value of type "object" but instead got value "[]" of type "array"
    at object (stimulus.js:1909:1)
    at extended.get (stimulus.js:1789:1)
    at extended.connect (controller.js:14:1)
    at Context.connect (stimulus.js:1086:1)
    at Module.connectContextForScope (stimulus.js:1278:1)
    at stimulus.js:1606:1
    at Array.forEach (<anonymous>)
    at Router.connectModule (stimulus.js:1606:1)
    at Router.loadDefinition (stimulus.js:1569:1)
    at stimulus.js:1661:1

{identifier: 'symfony--ux-cropperjs--cropper', controller: extended, element: input#form_crop_options}

排查步骤 #

1. 修正crop_options字段的初始值类型 #

错误核心是Stimulus控制器期望input#form_crop_options的value为JSON对象，但当前传入的是空数组[]：

• 检查表单Type类：将crop_options字段的默认值从空数组[]改为空关联数组[]（PHP中关联数组序列化后为JSON对象）或new \stdClass()。示例：

  // 表单Type的buildForm方法内
  $builder->add('crop_options', HiddenType::class, [
      'data' => $options['data']?->getCropOptions() ?? [], // 确保初始值为关联数组而非索引数组
  ]);
  

• 检查Doctrine实体：若crop_options为json类型字段，确保其默认值设置为{}而非[]。

2. 验证前端字段的实际值 #

在浏览器开发者工具中定位input#form_crop_options元素：

• 查看其value属性，若值为[]，手动修改为{}后刷新页面，验证错误是否消失。
• 若修改后错误消失，确认问题源于后端传递的初始值类型错误。

3. 检查Twig模板渲染逻辑 #

确保crop_options字段的渲染代码未传递错误类型的参数：

• 正确渲染示例：

  {{ form_row(form.crop_options, {
      'attr': {
          'data-controller': 'symfony--ux-cropperjs--cropper',
          'data-cropper-src-value': asset('uploads/' ~ entity.image)
      }
  }) }}
  

• 避免手动设置data-cropper-options-value为数组类型，必须传递JSON对象格式的值。

4. 同步依赖版本兼容性 #

执行命令更新相关依赖，确保版本匹配：

yarn upgrade @symfony/ux-cropperjs @symfony/stimulus-bridge stimulus

5. 清理全链路缓存 #

• 清理Symfony后端缓存：

  php bin/console cache:clear
  php bin/console assets:install
  

• 重新编译前端资源：

  yarn encore dev # 开发环境
  # 生产环境执行
  yarn encore production
  

内容的提问来源于stack exchange，提问作者Tom