React项目导入Bootstrap遇default导出不存在错误求助

问题原因 #

Bootstrap 5的ES模块未提供默认导出（default export），你使用import bootstrap from "bootstrap"的默认导入方式不符合它的模块结构，因此触发报错。

两种解决方法 #

• 方法一：全局导入Bootstrap JS
  修改导入语句，Bootstrap会自动将bootstrap对象挂载到全局window上：

  import React from 'react';
  import 'bootstrap'; // 移除default导入
  import 'bootstrap/dist/css/bootstrap.min.css'; // 务必导入Bootstrap样式
  
  const App: React.FC = () => {
    React.useEffect(() => {
      let modal = document.getElementById('exampleModal');
      if (modal) {
        var myModal = new window.bootstrap.Modal(modal);
        myModal.show();
      }
    }, []);
  
    // ... 其余代码保持不变
  }
  

• 方法二：按需导入指定组件（更高效）
  仅导入你需要的Modal组件，减少打包体积：

  import React from 'react';
  import { Modal } from 'bootstrap'; // 按需导入Modal
  import 'bootstrap/dist/css/bootstrap.min.css'; // 必须导入样式
  
  const App: React.FC = () => {
    React.useEffect(() => {
      let modal = document.getElementById('exampleModal');
      if (modal) {
        var myModal = new Modal(modal); // 直接使用导入的Modal
        myModal.show();
      }
    }, []);
  
    // ... 其余代码保持不变
  }
  

注意事项 #

• 必须导入Bootstrap的CSS文件，否则组件样式无法生效。
• 你的安装命令pnpm install bootstrap@v5.3.1是正确的，问题仅出在导入方式上。

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