在webpack encore环境使用html5-qrcode导入后控制台报错如何解决

• html5-qrcode@2.0.11版本的dist输出文件存在UMD格式打包缺陷，代码内部默认将this绑定为全局window对象，但webpack编译CommonJS规范的模块时，模块作用域内的this会被默认赋值为undefined，因此代码执行到读取this.Html5Qrcode的逻辑时就会抛出空指针错误。
• 你当前使用的Symfony Encore封装的webpack环境，没有针对该库做特殊的上下文兼容配置，因此直接触发了上述兼容性问题。

按易用性优先级排序，可任选一种方案修复：

1. 升级库版本
   优先选择升级到html5-qrcode≥2.1.0版本，该版本系列已经官方修复了UMD打包的this指向问题，无需额外配置即可正常导入使用，执行以下命令更新版本即可：
   npm i html5-qrcode@latest --save
   如果必须使用2.0.x版本，也可以选择降级到1.x稳定版本，同样不存在该兼容性问题。

2. 修改webpack配置兼容旧版本
   如果因业务限制不能修改版本，可在Symfony Encore的配置文件（通常为webpack.config.js）中添加loader配置，强制将html5-qrcode模块的上下文指向window：
   首先安装依赖：
   npm i imports-loader --save-dev
   然后修改webpack配置：

Encore
  // 原有其他配置保持不变
  .addLoader({
    test: require.resolve('html5-qrcode/dist/html5-qrcode.min.js'),
    loader: 'imports-loader',
    options: {
      wrapper: 'window'
    }
  })
;

修改配置后重启编译服务即可正常导入使用。

3. 改用全局引入方式
   直接在项目的HTML模板中通过script标签引入html5-qrcode的本地文件或公共资源，之后直接使用全局变量Html5Qrcode调用相关能力，无需在JS文件中导入，也可以避开该打包兼容性问题。

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