React项目用Bootstrap开发导航栏时引入JS报jquery解析失败错误

异常表现 #

• 未引入jQuery相关代码时，项目可正常编译运行，但导航栏的折叠交互失效，移动端点击汉堡按钮无法展开、收起菜单
• 在入口index.js中常规引入jQuery、Bootstrap压缩版JS文件后，项目触发编译报错，具体报错内容为：

  ./node_modules/bootstrap/dist/js/bootstrap.min.js
  模块解析失败：在D:\react\covid\client\node_modules\bootstrap\dist\js路径下无法解析'jquery'模块

核心报错根因 #

• Bootstrap官方版本的JS交互逻辑完全依赖jQuery实现，运行时要求项目将jQuery作为独立依赖安装到node_modules目录，仅在代码中书写引入语句不会自动拉取对应依赖包，这是触发“模块不存在”报错的直接原因
• React项目基于ES模块规范构建，模块存在严格的作用域隔离，即使完成jQuery依赖安装，直接引入的jQuery变量默认挂载在模块作用域下，没有暴露到全局window对象，会导致Bootstrap的JS脚本执行时无法获取到对应的jQuery实例，触发交互失效的问题

排障解决步骤 #

• 在项目客户端路径下安装缺失的依赖，执行安装命令：
  npm install jquery bootstrap
• 调整入口文件index.js的引入顺序与逻辑，解决模块作用域隔离问题：
  1. 引入jQuery模块：import $ from 'jquery';
  2. 将jQuery实例挂载到全局对象：
     window.jQuery = $;
window.$ = $;
  3. 按顺序引入Bootstrap的JS脚本与样式文件：
     import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
• 若项目启用了ESLint代码检查，需在配置项中将全局的$、jQuery加入全局变量白名单，避免代码检查阶段报变量未定义的提示

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