Symfony 5搭配Encore、Stimulus时Bootstrap JS无法加载如何排查

• 首先确认核心遗漏：你当前项目已安装bootstrap依赖，但未在JS入口中引入Bootstrap的JS模块。你项目中的assets/bootstrap.js是Stimulus框架的启动文件，和Bootstrap UI框架无关联，仅引入了样式未引入JS自然无法生效。
  在assets/app.js中添加导入代码即可：

  // any CSS you import will output into a single css file (app.css in this case)
  import './styles/app.scss';
  // 新增：导入Bootstrap JS
  import 'bootstrap';
  // 如需要全局调用bootstrap对象，可补充挂载
  window.bootstrap = require('bootstrap');
  
  // start the Stimulus application
  import './bootstrap';
  

• 清理冲突依赖：Bootstrap 5依赖@popperjs/core，你同时安装了旧版Bootstrap 4用的popper.js，可能导致依赖冲突，执行命令卸载即可：

  npm uninstall popper.js
  

• 检查jQuery相关配置：如果需要使用jQuery调用Bootstrap组件方法，需取消webpack.config.js中.autoProvidejQuery()的注释，确保全局jQuery可被Bootstrap检测到，注意导入顺序必须为先导入jQuery，再导入Bootstrap JS。Bootstrap 5本身不强制依赖jQuery，无相关需求可忽略本步骤。
• 验证加载结果：重新执行npm run dev编译后，打开浏览器控制台输入bootstrap，如果返回包含Modal、Dropdown等构造函数的对象，说明加载成功；如果返回undefined，重新检查导入语句位置、依赖安装是否完整。
• 排除Stimulus影响测试：临时注释assets/app.js中import './bootstrap';一行，测试Bootstrap下拉菜单等组件是否正常工作，如恢复正常则说明存在导入顺序问题，调整为先导入Bootstrap JS再启动Stimulus即可。
• 检查模板引入配置：确认Twig模板中使用{{ encore_entry_script_tags('app') }}引入编译后的JS文件，放置在</body>标签之前，避免放在head中未加defer属性导致DOM未加载完成、Bootstrap组件初始化失败。

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