解决TypeScript中使用Bootstrap Modal的编译与运行报错问题

1. 补全必要依赖安装 #

你之前仅安装了Bootstrap的类型包，但缺少Bootstrap核心库及其依赖Popper.js。执行以下命令安装全部所需：

npm install bootstrap @popperjs/core @types/bootstrap

2. 修正TypeScript配置（解决编译时TS2792错误） #

修改tsconfig.json的编译选项，确保模块解析逻辑能正确识别第三方包：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler", // 或NodeNext，适配项目模块规范
    "target": "ES2020",
    "strict": true,
    "esModuleInterop": true
  }
}

• moduleResolution: "Bundler" 是TypeScript 5.0+推荐配置，适配Vite、Webpack等现代打包工具的模块解析逻辑
• 若使用较旧TS版本，可改用moduleResolution: "NodeNext"

3. 解决运行时模块解析错误 #

浏览器原生不支持"裸模块导入"（即直接import "bootstrap"），需根据项目环境选择以下方案：

方案A：使用现代打包工具（推荐）

如果项目基于Vite、Webpack或Rollup等打包工具，直接保留原TS代码即可：

import { Modal } from "bootstrap";
const myModal = new Modal('#myModal');

打包工具会自动处理模块解析，将裸模块转换为浏览器可识别的路径。

方案B：使用CDN ES模块导入（无打包工具场景）

在HTML中通过CDN引入Bootstrap的ES模块版本，无需本地安装依赖：

<script type="module">
  import * as bootstrap from 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.esm.min.js';
  const myModal = new bootstrap.Modal('#myModal');
</script>

这种方式无需配置TypeScript，直接在浏览器中运行。

方案C：本地文件相对路径导入（仅适合简单测试）

若必须使用本地安装的包，需将导入路径改为相对node_modules的路径（需配合本地服务器，如live-server）：

import { Modal } from './node_modules/bootstrap/dist/js/bootstrap.esm.js';
const myModal = new Modal('#myModal');

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