Symfony集成PUGXAutoCompleterBundle时出现jQuery UI相关报错如何解决？

你遇到的$fakeInput.autocomplete is not a function报错，本质是jQuery UI的autocomplete组件没有正确挂载到jQuery实例上，PUGX AutoCompleterBundle的jqueryui适配依赖该组件，因此加载时触发了类型错误。

• 修正jQuery UI的导入逻辑，不要直接导入全量jquery-ui包，改为单独导入autocomplete组件及其依赖，同时将jQuery挂载到全局window对象，避免模块化隔离导致第三方包找不到实例，修改app.js代码如下：

import $ from 'jquery';
// 仅导入autocomplete相关组件，避免全量导入的注册异常
import 'jquery-ui/ui/widgets/autocomplete';
import '@pugx/autocompleter-bundle/js/autocompleter-jqueryui';
// 挂载到全局，兼容第三方包的全局jQuery调用
window.$ = window.jQuery = $;

• 确认webpack.config.js中autoProvidejQuery的调用位置正确，必须放在Encore配置的链式调用序列中，不要漏写或写在配置终止方法之后：

const Encore = require('@symfony/webpack-encore');

Encore
    // 入口、输出路径等基础配置
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/app.js')
    // 确保autoProvidejQuery在插件配置前调用
    .autoProvidejQuery()
    // 其他后续配置，比如启用Sass、React支持等
    .enableSingleRuntimeChunk()
;

module.exports = Encore.getWebpackConfig();

• 删除业务代码中重复的jQuery导入语句，autoProvidejQuery会自动给所有需要的JS文件注入jQuery实例，重复导入会生成独立的新jQuery实例，该实例上没有挂载autocomplete组件，修改业务代码如下：

// 删掉重复的import $ from 'jquery'
$('#postal_code_zipcode').autocompleter({
    url_list: '/author_search',
    url_get: '/author_get/'
})

• 清理缓存重新编译，执行以下命令排除缓存导致的资源异常：

yarn cache clean
rm -rf node_modules/.cache
yarn dev

• 如仍报错，在浏览器控制台执行console.log($.fn.autocomplete)，如果输出undefined说明jQuery UI组件未正确安装，检查package.json中jquery-ui的版本，建议使用1.12.x及以上的稳定版本。

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