NPM项目导入Bootstrap报document未定义错误该如何解决？

Reference error: document is not defined 报错的核心是 Bootstrap 的 JavaScript 组件完全依赖浏览器端的 DOM API（document、window 等），你在服务端运行的 index.mjs 中直接导入时，Node.js 环境不存在这些浏览器专属对象，因此触发错误。

• 优先把 Bootstrap JS 的导入逻辑从服务端 index.mjs 迁移到 Handlebars 模板的客户端脚本部分，保证代码仅在用户浏览器环境执行，避免服务端报错。
  可以直接在 Handlebars 模板中引入打包好的 Bootstrap JS 产物：

  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  

  如果你使用 Vite、Webpack 等打包工具，也可以单独创建客户端入口文件（例如 client.js），在文件内写入 import 'bootstrap'，再将打包后的产物路径引入到 Handlebars 模板中即可。
• 如果你确实需要在服务端代码中关联 Bootstrap 逻辑，需要增加环境判断，仅在浏览器环境下才导入 Bootstrap JS：

  if (typeof window !== 'undefined' && typeof document !== 'undefined') {
    import('bootstrap')
  }
  

• Bootstrap 样式可以直接在 Handlebars 模板的头部引入：

  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  

  使用打包工具的场景也可以在客户端入口JS中导入样式：import 'bootstrap/dist/css/bootstrap.min.css'
• 如果你使用 Express 等框架搭配 Handlebars，需要先配置静态资源托管，才能在模板中正常访问 node_modules 下的 Bootstrap 文件，示例配置：

  app.use('/node_modules', express.static(path.join(process.cwd(), 'node_modules')))
  

内容的提问来源于stack exchange，提问作者Adrián