Symfony7+Bootstrap5.3下拉菜单失效：i.createPopper is not a function

开发基于Symfony 7、使用Bootstrap 5.3的网站，其他功能正常，但下拉菜单点击无任何反应，控制台输出错误：

Uncaught TypeError: i.createPopper is not a function

下拉菜单HTML结构：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</li>

通过AssetMapper安装Bootstrap，importmap.php配置：

<?PHP
return [
    'app' => [
        'path' => './assets/app.js',
        'entrypoint' => true,
    ],
    '@hotwired/stimulus' => [
        'version' => '3.2.2',
    ],
    '@symfony/stimulus-bundle' => [
        'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
    ],
    '@hotwired/turbo' => [
        'version' => '7.3.0',
    ],
    '@popperjs/core' => [
        'version' => '2.11.8',
    ],
    'bootstrap' => [
        'version' => '5.3.3',
    ],
    'bootstrap/dist/css/bootstrap.min.css' => [
        'version' => '5.3.3',
        'type' => 'css',
    ],
    'bootstrap/dist/js/bootstrap.min.js' => [
        'version' => '5.3.3',
    ],
    'bootstrap-icons/font/bootstrap-icons.min.css' => [
        'version' => '1.11.3',
        'type' => 'css',
    ],
    '@fortawesome/fontawesome-free/css/all.css' => [
        'version' => '6.7.2',
        'type' => 'css',
    ]
];

app.js内容：

import './bootstrap.js';
/*
 * Welcome to your app's main JavaScript file!
 *
 * This file will be included onto the page via the importmap() Twig function,
 * which should already be in your base.html.twig.
 */
import './styles/app.css';

// Import Popper.js
import '@popperjs/core';

// Import everything related to Bootstrap
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap-icons/font/bootstrap-icons.min.css';

// Import font awesome
import '@fortawesome/fontawesome-free/css/all.css';

console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

修复方案 #

1. 修正Popper.js导入方式 #

Bootstrap 5需要Popper.js暴露全局变量才能正常调用createPopper方法，修改app.js中的Popper导入代码：

// 替换原有的import '@popperjs/core';
import * as Popper from '@popperjs/core';
window.Popper = Popper;

2. 优化Bootstrap JS导入（推荐） #

使用Bootstrap的ES模块版本替代单独的min.js文件，这样会自动处理Popper依赖：

// 替换原有的import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap';

同时可以删除importmap.php中bootstrap/dist/js/bootstrap.min.js的配置项，避免冗余。

3. 清理缓存确保生效 #

执行以下命令清理Symfony缓存并重新编译资产：

php bin/console cache:clear
php bin/console asset-map:compile

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