在Svelte 5中集成Bootstrap 5的模态框调用问题求助

问题1：导入Bootstrap时出现「document is not defined」错误 #

SvelteKit默认是服务端渲染（SSR），组件顶部直接导入Bootstrap会在服务端执行，而服务端环境没有document对象，因此触发报错。解决核心是仅在客户端环境导入Bootstrap，利用Svelte的onMount钩子（该钩子仅在浏览器端运行）：

<script>
  import { onMount, onDestroy } from 'svelte';

  let modalInstance;

  onMount(async () => {
    // 动态导入本地Bootstrap bundle
    const bootstrap = await import('$lib/bs5/bootstrap.bundle.min.js');
    // 目标模态框DOM元素
    const modalEl = document.getElementById('custom-modal');
    // 初始化模态框实例
    modalInstance = new bootstrap.Modal(modalEl);
    // 直接触发模态框
    modalInstance.show();
  });

  // 组件销毁时清理模态框实例
  onDestroy(() => {
    modalInstance?.dispose();
  });
</script>

<!-- 模态框HTML结构 -->
<div class="modal fade" id="custom-modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel">自定义模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        无需按钮触发的模态框内容
      </div>
    </div>
  </div>
</div>

如果是通过CDN引入Bootstrap JS，可直接在onMount中使用全局bootstrap对象，无需本地导入：

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const modalEl = document.getElementById('custom-modal');
    const modal = new bootstrap.Modal(modalEl);
    modal.show();
  });
</script>

问题2：全局加载Bootstrap后无TypeScript智能提示且报错 #

只需安装Bootstrap的类型定义包并配置全局类型声明，即可解决TS提示与报错问题：

1. 安装类型依赖：

npm install @types/bootstrap --save-dev

2. 在项目src/app.d.ts文件（无则新建）中添加全局类型声明：

declare global {
  var bootstrap: typeof import('bootstrap');
}

export {};

配置完成后，VS Code/TypeScript就能识别全局bootstrap对象，提供完整的智能提示并消除报错。

额外说明 #

直接使用原生Bootstrap的方式完全可行，无需依赖sveltestrap，只需注意SSR环境下的客户端代码执行时机，以及TypeScript的类型配置即可。

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