使用lit-html开发Web组件引入pdf.js遇报错：root is undefined

我之前在开发基于lit-html的PDF预览组件时，也碰到过一模一样的报错！这个问题本质是pdf.js的UMD模块在ES模块打包环境下的适配问题，下面是我亲测有效的几个解决方案：

1. 改用ES模块版本的pdf.js #

原来的pdfjs-dist/build/pdf.js是UMD格式的模块，在通过ES模块import导入时，webpack的模块封装逻辑会打乱它预期的全局环境。你可以直接改用官方提供的ES模块入口：

// 替换原来的导入语句
import * as pdfjsLib from 'pdfjs-dist/esm/pdf.js';
// 同时导入worker（如果需要的话）
import 'pdfjs-dist/esm/pdf.worker.js';

2. 配置webpack的globalObject #

如果必须使用UMD版本的pdf.js，那需要修改webpack配置，确保它的全局对象指向浏览器环境的self：
在你的webpack.config.js里添加或修改output配置：

module.exports = {
  // ...其他配置
  output: {
    // ...其他output配置
    globalObject: 'self'
  }
};

这个配置会让webpack在封装模块时，把全局对象设为self，匹配pdf.js预期的root环境。

3. 确保Worker路径正确初始化 #

在lit组件中使用pdf.js时，记得正确设置Worker的路径，避免后续加载问题：

import * as pdfjsLib from 'pdfjs-dist/esm/pdf.js';

// 在组件初始化时配置worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdfjs-dist/esm/pdf.worker.js';

为什么script标签引入没问题？ #

因为通过<script>标签加载UMD模块时，它会自动挂载到window对象上，pdf.js能正常找到它需要的全局root；而ES模块的import会让webpack把模块封装在独立的作用域里，默认的全局对象设置不匹配，就会抛出"root is undefined"的错误。

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