Uncaught TypeError: Popper.createPopper is not a function报错求助

核心问题 #

• 多版本Bootstrap冲突：页面同时引入了Bootstrap 4和Bootstrap 5，两者依赖的Popper版本不兼容。Bootstrap 5要求Popper v2.x，而你引入的是Popper v1.14.7，且Bootstrap 5的bootstrap.bundle.min.js已经内置了Popper v2，无需单独引入旧版Popper。
• 重复脚本覆盖全局变量：多次重复引入jQuery、Bootstrap、Popper，导致全局变量被反复覆盖，引发函数定义冲突。
• 脚本加载顺序错误：依赖库（如jQuery）未在依赖它的组件（如bootstrap-select、DataTables）之前加载，部分主题脚本（如plugins.bundle.js、scripts.bundle.js）也未在合适的时机引入。

具体修复步骤 #

1. 清理重复脚本：删除所有重复引入的jQuery、Bootstrap、Popper，只保留一套兼容的版本组合。优先选择Bootstrap 5，因为你多次引入了该版本。
2. 调整加载顺序：
   • 先引入jQuery（部分组件如bootstrap-select、DataTables依赖它）
   • 再引入Bootstrap 5的bundle文件（已包含兼容的Popper v2，无需单独引入Popper）
   • 接着引入依赖Bootstrap的第三方组件（如bootstrap-select、DataTables）
   • 最后引入主题自带的脚本（如plugins.bundle.js、widgets.bundle.js、scripts.bundle.js）和自定义脚本
3. 移除不兼容资源：删除所有Popper v1.14.7和Bootstrap 4的引入代码，避免版本冲突。

修复后的示例脚本顺序 #

<!-- 先引入依赖库 -->
<script src="~/Builder/js/jquery.min.js?v=2"></script>
<script src="~/Builder/js/jquery-ui.min.js?v=2"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

<!-- 第三方组件 -->
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<script src="//cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>

<!-- 主题与自定义脚本 -->
<script src="~/V3/assets/plugins/global/plugins.bundle.js"></script>
<script src="~/V3/assets/js/widgets.bundle.js"></script>
<script src="~/V3/assets/js/custom/widgets.js"></script>
<script src="~/V3/assets/js/custom/apps/chat/chat.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/upgrade-plan.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/type.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/budget.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/settings.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/team.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/targets.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/files.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/complete.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-project/main.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/select-location.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/create-app.js"></script>
<script src="~/V3/assets/js/custom/utilities/modals/users-search.js"></script>

<!-- 自定义业务脚本 -->
<script src="~/Chat/MainChat.js"></script>
<script src="~/choose.js?v=9"></script>
<script src="~/Builder/js/form_builder.js?v=148"></script>
<script src="~/Xerox/jspdf.min.js"></script>
<script src="~/Xerox/main.js?v=4"></script>
<script src="~/Update/Update.js?v=5"></script>
<script src="~/waitjs/waitme.min.js"></script>
<script src="~/js/hierarchy-select.min.js?v=2"></script>

<!-- 其他工具脚本 -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="~/V3/assets/js/scripts.bundle.js"></script>

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