使用screenfull插件报错问题

简介: 使用screenfull插件报错问题

我们实现全屏功能可以直接手写方法,但利用screenfull插件来处理全屏的问题非常方便,但是今天正常使用遇到个bug


  • 安装npm包npm i screenfull默认的是最新版本


  • 导入import ScreenFull from 'screenfull'使用


  • 正常使用全屏功能ScreenFull.toggle()


这时候就给我报错了



出现页面空白加载不出来的情况,我去网上找了几篇文章都说是版本太高,需要降低包插件的版本,我尝试了多次依旧报错


  • 解决


的确要降低版本,我降到得是screenfull@5.2.0版本,那为什么会报错呢?我发现我们导入的路径是module目录下的screenfull,但是其中根本就没有对应的index.js文件



所以我们得把导入的路径改一下import ScreenFull from 'screenfull/dist/screenfull',页面就正常显示了,全屏功能也正常了

相关文章
|
6月前
|
Java Maven
idea中项目和module的环境版本设置
idea中项目和module的环境版本设置
62 0
A module cannot have multiple default exports.是、关闭Vetur扩展,或者重启项目,神奇的bug,复制代码造成的
A module cannot have multiple default exports.是、关闭Vetur扩展,或者重启项目,神奇的bug,复制代码造成的
|
5月前
|
JavaScript
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
vue : 无法加载文件 D:\module\npm_module\npm_modules\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c
|
6月前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
334 1
vuecli3打包时开启了productionSourceMap为true却没有生成sourcemap文件?
vuecli3打包时开启了productionSourceMap为true却没有生成sourcemap文件?
339 0
|
6月前
|
数据可视化 JavaScript
Vue-cli可视化界面的bulid构建线上模式打包失败:No module factory available for dependency type: CssDependency
Vue-cli可视化界面的bulid构建线上模式打包失败:No module factory available for dependency type: CssDependency
|
前端开发 JavaScript 编译器
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
【前端异常】vscode:无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module ”webpack“
846 0
VSCode找不到自定义模块ModuleNotFoundError
VSCode找不到自定义模块ModuleNotFoundError
434 0
|
Linux Go C++
VS CODE插件扩展无法使用的解决办法
VS CODE插件扩展无法使用的解决办法
2480 1
VS CODE插件扩展无法使用的解决办法
|
Java API Android开发
通过自定义Gradle插件修改编译后的class文件
通过自定义Gradle插件修改编译后的class文件
通过自定义Gradle插件修改编译后的class文件