因Bootstrap未捕获错误导致React组件无法加载的求助

问题详情 #

在新电脑上初始化原有React项目时，出现Bootstrap相关未捕获错误，导致React组件无法加载，控制台报错如下：

bootstrap:27 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at Object.<anonymous> (browser.umd.js:220:1)
    at Object.<anonymous> (browser.umd.js:220:1)
    at r (browser.umd.js:1:1)
    at Object.<anonymous> (browser.umd.js:1012:1)
    at r (browser.umd.js:1:1)
    at Object.<anonymous> (browser.umd.js:1009:1)
    at r (browser.umd.js:1:1)
    at Object.<anonymous> (browser.umd.js:308:1)
    at Object.<anonymous> (browser.umd.js:425:1)
    at r (browser.umd.js:1:1)
    at Object.<anonymous> (browser.umd.js:756:1)
    at r (browser.umd.js:1:1)
    at Object.<anonymous> (browser.umd.js:973:1)
    at Object.<anonymous> (browser.umd.js:977:1)
    at r (browser.umd.js:1:1)
    at Object.<anonymous> (browser.umd.js:973:1)

修复方案 #

• 强制依赖版本一致
  直接复制原项目的package-lock.json（npm）或yarn.lock（yarn）文件到新电脑，执行命令重装依赖，确保版本完全匹配：

  npm install
  # yarn用户执行：yarn install
  

• 清理缓存重装依赖
  本地npm缓存可能导致依赖安装异常，执行以下命令清理后重新安装：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

• 修正Bootstrap引入方式
  确保项目中Bootstrap的引入正确，推荐使用包含Popper.js的bundle版本，避免版本不兼容：

  // 在项目入口文件（如index.js）中导入
  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'bootstrap/dist/js/bootstrap.bundle.min.js';
  

• 指定兼容版本安装
  如果上述方法无效，尝试安装经过验证的兼容版本：

  npm install bootstrap@5.2.3 popper.js@2.11.6
  

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