Vite 中 lightGallery v1.10 为何提示 root undefined？

2026-11-04数据阿明

结论

报错是因为 lightgallery-all.js 中的 UMD 包装器将顶层 this 作为 root。文件通过 import 加入 Vite 模块图后，会按 ES module 语义执行，此时模块顶层的 this 是 undefined。因此代码访问 root["jQuery"] 时会报错。

将 jQuery 赋给 window.jQuery 无法解决 root 为 undefined 的问题。报错指向合并文件中的第二处调用，说明文件中有多个独立的 UMD 包装器，lg-autoplay 只是其中一段。

修复 UMD 包装器

在 lightgallery-all.js 中检查所有类似下面的调用：

}(this, function ($) {

将传入的 this 改为浏览器全局对象，例如：

}(typeof window !== 'undefined' ? window : globalThis, function ($) {

检查文件中的每个 UMD 包装器，因为合并文件的不同插件段落可能重复使用这种写法。在浏览器中，root 会指向 window，root["jQuery"] 就能读取全局 jQuery。

修改后，保留 bootstrap.js 中对 jQuery 全局变量的设置，并确认这段代码在加载 lightGallery 前执行：

import $ from 'jquery';
import jQuery from 'jquery';

window.$ = $;
window.jQuery = jQuery;

import '../assets/js/lightgallery-all.js';

如果修改的是第三方文件副本，建议在项目中记录补丁，以免后续替换文件时丢失修改。

为什么注入配置没解决

@rollup/plugin-inject 可以处理模块中的变量引用，但这里的 UMD 包装器显式传入了 this。注入 $ 或 jQuery 不会自动将这个 this 变成 window，因此 root 仍会是 undefined。

关于报错位置

lightgallery-all.js 将多个模块放在同一个文件中，每个模块仍可能保留自己的 UMD 包装器。第 1407 行位于 lg-autoplay 段落，对应 root["jQuery"] 的调用。它是合并文件中的第二处调用，但这并不表示 jQuery 被加载了两次，也不能单凭这一点判断存在多个 lightGallery 实例。应检查对应包装器传入的 root，并处理文件中其他使用顶层 this 的包装器。