Symfony UX Autocomplete自定义JS控制器未加载，无法修改TomSelect实例

我在配置Symfony UX Autocomplete组件时遇到问题，想要修改TomSelect实例的渲染方式，并添加checkbox-options这类插件。目前自动完成功能正常，但自定义的Stimulus控制器始终没加载，控制台没有任何日志输出，无法修改TomSelect实例。

已实现的配置 #

1. EntityAutocompleteField.php #

#[AsEntityAutocompleteField]
class EntityAutocompleteField extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'class' => Entity::class,
            'searchable_fields' => ['name'],
            'label' => 'entity',
            'choice_label' => 'name',
            'attr' => [
                'data-controller' => 'custom-autocomplete', // 指向自定义控制器
            ],
            'multiple' => true,
        ]);
    }

    public function getParent(): string
    {
        // 在2.13版本中将被BaseEntityAutocompleteType替代
        return ParentEntityAutocompleteType::class;
    }
}

2. ./assets/controllers.json #

{
    "controllers": {
        "@symfony/ux-autocomplete": {
            "autocomplete": {
                "enabled": true,
                "fetch": "eager",
                "autoimport": {
                    "tom-select/dist/css/tom-select.default.css": true,
                    "tom-select/dist/css/tom-select.bootstrap5.css": false
                }
            }
        }
    },
    "entrypoints": []
}

3. 自定义Stimulus控制器：./assets/controllers/custom-autocomplete_controller.js #

import { Controller } from '@hotwired/stimulus';

/* stimulusFetch: 'lazy'*/ // 不确定是否需要，有无该行都不生效
export default class extends Controller {

  initialize() {
    console.debug("Init");
    this._onPreConnect = this._onPreConnect.bind(this);
    this._onConnect = this._onConnect.bind(this);
  }

  connect() {
    console.debug("Connect");

    this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
    this.element.addEventListener('autocomplete:connect', this._onConnect);
  }

  disconnect() {
    console.debug("Disconnect");

    // 断开控制器时移除监听器避免副作用
    this.element.removeEventListener('autocomplete:connect', this._onConnect);
    this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
  }

  _onPreConnect(event) {
    // TomSelect尚未初始化，可修改配置项
    console.log(event.detail.options); // 用于初始化TomSelect的配置项
    event.detail.options.onChange = (value) => {
      // ...
    };
  }

  _onConnect(event) {
    console.log(event.detail.tomSelect); // TomSelect实例
    console.log(event.detail.options); // 初始化TomSelect所用的配置项
  }
}

4. Webpack配置：./webpack.config.js #

Encore
 ...
    .addEntry('app', './assets/js/app.js')
    .enableStimulusBridge('./assets/controllers.json')

5. ./assets/js/app.js #

import { startStimulusApp } from '@symfony/stimulus-bridge';

export const app = startStimulusApp(require.context(
  '@symfony/stimulus-bridge/lazy-controller-loader!./../controllers/',
  true,
  /\.[jt]sx?$/
));

6. 已执行的命令 #

bin/console assets:install
yarn install
yarn build
bin/console cache:clear
yarn watch 

7. composer.json相关依赖 #

"@hotwired/stimulus": "^3.0.0",
    "@symfony/stimulus-bridge": "^3.2.0",
    "@symfony/stimulus-bundle": "file:vendor/symfony/stimulus-bundle/assets",
    "@symfony/ux-autocomplete": "file:vendor/symfony/ux-autocomplete/assets",
    "tom-select": "^2.2.2",

8. yarn.lock相关内容 #

"@symfony/stimulus-bridge@^3.2.0":
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/@symfony/stimulus-bridge/-/stimulus-bridge-3.2.2.tgz#afc1918f82d78cb2b6e299285c54094aa7f53696"
  integrity sha512-kIaUEGPXW7g14zsHkIvQWw8cmfCdXSqsEQx18fuHPBb+R0h8nYPyY+e9uVtTuHlE2wHwAjrJoc6YBBK4a7CpKA==
  dependencies:
    "@hotwired/stimulus-webpack-helpers" "^1.0.1"
    "@types/webpack-env" "^1.16.4"
    acorn "^8.0.5"
    loader-utils "^2.0.0"
    schema-utils "^3.0.0"

"@symfony/stimulus-bundle@file:vendor/symfony/stimulus-bundle/assets":
  version "1.0.0"

"@symfony/ux-autocomplete@file:vendor/symfony/ux-autocomplete/assets":
  version "1.0.0"

"@hotwired/stimulus-webpack-helpers@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@hotwired/stimulus-webpack-helpers/-/stimulus-webpack-helpers-1.0.1.tgz#4cd74487adeca576c9865ac2b9fe5cb20cef16dd"
  integrity sha512-wa/zupVG0eWxRYJjC1IiPBdt3Lruv0RqGN+/DTMmUWUyMAEB27KXmVY6a8YpUVTM7QwVuaLNGW4EqDgrS2upXQ==

"@hotwired/stimulus@^3.0.0":
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==


tom-select@^2.2.2:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/tom-select/-/tom-select-2.3.1.tgz#df338d9082874cd0bceb3bee87ed0184447c47f1"
  integrity sha512-QS4vnOcB6StNGqX4sGboGXL2fkhBF2gIBB+8Hwv30FZXYPn0CyYO8kkdATRvwfCTThxiR4WcXwKJZ3cOmtI9eg==
  dependencies:
    "@orchidjs/sifter" "^1.0.3"
    "@orchidjs/unicode-variants" "^1.0.4"

问题现象 #

自动完成功能正常工作，但自定义控制器custom-autocomplete未加载，控制台无任何日志输出，无法修改TomSelect实例或添加插件。已确认./public/build目录中存在该控制器文件。

内容的提问来源于stack exchange，提问作者Tomasz Buczeń