浏览器 ESM 加载 bootstrap.esm.min.js 报 Failed to resolve module specifier "@popperjs/core" 怎么排查？
【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap
如果你没有使用打包工具，而是直接在浏览器里以<script type="module">的方式加载 Bootstrap 5.3.8 的 ESM 构建（bootstrap.esm.js/bootstrap.esm.min.js），控制台会抛出下面的错误，Bootstrap 的所有插件（Toast、Popover、Modal 等）都无法初始化：
Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".本文依据 Bootstrap JavaScript 官方文档 说明这个报错的成因、给出文档中的importmap修复方式，以及如何验证修复生效。
报错在什么条件下出现
文档在 "Using Bootstrap as a module" 一节演示的正是这个场景。最简写法是直接用完整文件名导入 ESM 构建：
<script type="module"> import { Toast } from 'bootstrap.esm.min.js' Array.from(document.querySelectorAll('.toast')) .forEach(toastNode => new Toast(toastNode)) </script>注意这里的例子导入的是Toast，但文档明确说"如果原样这样试，会在控制台看到上面的报错"。也就是说，报错与导入哪个插件无关——只要从bootstrap.esm.min.js导入任意成员就会触发，原因在下一节。
前提条件（来自文档）：
- 目标浏览器需要支持 ES module，否则
type="module"本身就无法工作； - 浏览器中直接使用 ESM 时，必须使用完整路径和文件名，而不能像打包器那样用模块名（文档以
'bootstrap.esm.min.js'代替'bootstrap'来说明这一点）。
为什么浏览器解析失败：裸模块名与 Popper 依赖
根本原因在 Bootstrap 的 ESM 构建内部。文档给出的解释是：浏览器 ESM 只接受相对路径（./、../、/开头）的模块说明符，而 Bootstrap 对 Popper 的依赖用的是裸模块名（bare specifier）：
import * as Popper from "@popperjs/core"这条 import 可以直接在仓库源码中核对，位于 js/src/tooltip.js 和 js/src/dropdown.js。同时官方文档的 "Dependencies" 一节说明：dropdowns、popovers 和 tooltips 依赖 Popper。由于 ESM 构建是整包导出（见 js/index.esm.js 的 12 个插件导出），这些带 Popper import 的模块会被打包进来，因此任何一次导入都会先经过对@popperjs/core的解析，而浏览器无法把这个名字解析成实际地址，于是抛出Failed to resolve module specifier。
打包器（Webpack、Parcel、Vite 等）会自动按 npm 规则解析裸模块名，所以同一份 ESM 代码经过打包后不会报这个错；裸奔在浏览器里时则必须自己提供"名字 → 路径"的映射。
用 importmap 把裸模块名映射到完整路径
文档给出的修复方案是用<script type="importmap">把任意模块名解析为完整路径。如果你的目标浏览器不支持importmap，文档要求再引入 es-module-shims 项目（文档原文链接）做 polyfill。
下面是文档完整示例，其中[[config:cdn.css]]、[[config:cdn.css_hash]]、[[config:cdn.popper_esm]]、[[config:current_version]]这些模板变量已按仓库根目录 config.yml 中的cdn和current_version字段解析为实际值，可直接使用：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> <title>Hello, modularity!</title> </head> <body> <h1>Hello, modularity!</h1> <button id="popoverButton" type="button" class="btn btn-primary btn-lg" contenteditable="false">【免费下载链接】bootstrapThe most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.![]()
项目地址: https://gitcode.com/GitHub_Trending/bo/bootstrap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
