SvelteKit导入lib-jitsi-meet提示未解析变量及本地导入报错如何解决

你碰到的self is not defined报错核心原因是lib-jitsi-meet是纯浏览器端依赖，强依赖self/window等浏览器专属全局对象，SvelteKit默认开启服务端渲染，直接在代码顶层import该库会触发Node环境下的执行报错，<svelte:head>注入脚本后IDE无提示是全局变量未做类型声明导致，按以下步骤处理即可稳定运行同时解决智能提示问题：

具体实现步骤 #

• 移除所有顶层import lib-jitsi-meet、jquery的代码，不要在服务端可执行的代码块中直接引用这两个库
• 仅在客户端环境动态加载依赖，利用Svelte的onMount生命周期仅在浏览器端执行的特性，封装脚本加载逻辑：

<script>
  import { onMount } from 'svelte';
  // 提前声明变量，配合类型定义解决IDE报错
  /** @type {any} */
  let JitsiMeetJS;
  /** @type {any} */
  let $;

  onMount(async () => {
    // 避免重复注入脚本
    if (window.JitsiMeetJS) {
      JitsiMeetJS = window.JitsiMeetJS;
      $ = window.jQuery;
    } else {
      // 按依赖顺序加载脚本
      await loadScript('/vendor/jquery-3.5.1.min.js');
      await loadScript('/vendor/lib-jitsi-meet.min.js');
      JitsiMeetJS = window.JitsiMeetJS;
      $ = window.jQuery;
    }

    // 后续Jitsi初始化逻辑写在这里
    JitsiMeetJS.init({});
  })

  // 通用脚本加载方法
  const loadScript = (src) => new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.head.append(script);
  })
</script>

<!-- 页面DOM结构 -->

• 调整本地静态资源存放路径：把你之前放在lib/vender下的两个js文件移动到项目根目录的static/vendor文件夹下，SvelteKit会将static目录下的文件作为静态资源直接对外提供服务，不会经过ESM模块编译，加载路径直接写根路径/vendor/xxx.js即可，不需要走import逻辑。如果偏好CDN资源，直接把loadScript里的路径换成CDN地址即可。
• 解决WebStorm智能提示问题：打开项目根目录的app.d.ts文件，补充全局window对象的类型声明：

declare global {
  interface Window {
    JitsiMeetJS: any;
    jQuery: any;
    $: any;
  }
}

export {};

保存后重启WebStorm的TypeScript服务，就不会再提示未解析变量错误。如果需要更精准的代码提示，可以自行补充JitsiMeetJS的接口类型定义，或者安装社区维护的对应类型包。

避坑提示 #

所有依赖浏览器全局对象的第三方库，都不要在SvelteKit组件顶层直接import。Vite会将顶层import的依赖打入服务端构建产物，Node环境下没有浏览器专属API就会触发运行时崩溃。如果确实需要用import方式导入客户端专属依赖，需要添加?client后缀标识仅客户端导入：const JitsiMeetJS = await import('xxx?client')，但lib-jitsi-meet本身未做ESM规范适配，这种方式兼容性差，优先选择动态插入script标签的方案稳定性最高。

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