编程 使用page-skeleton-webpack-plugin生成骨架屏提示Cannot read property 'newPage' of null"解决办法

2024-11-17 05:02:46 +0800 CST views 3817

  App running at:
  - Local:   http://localhost:8080
  - Network: http://192.168.1.9:8080

[19:58:50] ‼ ｢pswp｣: Error: ENOENT: no such file or directory, open 'H:\php_web\phpStudy\WWW\1\qnvue\pay\shell\index.html'
[19:59:55] i ｢pswp｣: begin to generator skeleton screen
[19:59:55] ‼ ｢pswp｣:  TypeError: Cannot read property 'newPage' of null
    at Skeleton.newPage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:34:37)
    at Skeleton.genHtml (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:64:29)
    at H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:244:19
    at Array.map (<anonymous>)
    at Skeleton.renderRoutes (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:242:31)
    at SockJSConnection.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\server.js:144:57)
    at SockJSConnection.emit (events.js:210:5)
    at Session.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\transport.js:246:25)
    at WebSocketReceiver.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:104:39)
    at WebSocket.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:70:24)
    at WebSocket.emit (events.js:210:5)
    at WebSocket.dispatchEvent (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api\event_target.js:24:10)
    at WebSocket._receiveMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:142:10)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:34:49)
    at Hybi.emit (events.js:215:7)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\websocket-driver\lib\websocket\driver\hybi.js:460:14)
[19:59:56] i ｢pswp｣: begin to generator skeleton screen
[19:59:56] ‼ ｢pswp｣:  TypeError: Cannot read property 'newPage' of null
    at Skeleton.newPage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:34:37)
    at Skeleton.genHtml (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:64:29)
    at H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:244:19
    at Array.map (<anonymous>)
    at Skeleton.renderRoutes (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:242:31)
    at SockJSConnection.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\server.js:144:57)
    at SockJSConnection.emit (events.js:210:5)
    at Session.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\transport.js:246:25)
    at WebSocketReceiver.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:104:39)
    at WebSocket.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:70:24)
    at WebSocket.emit (events.js:210:5)
    at WebSocket.dispatchEvent (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api\event_target.js:24:10)
    at WebSocket._receiveMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:142:10)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:34:49)
    at Hybi.emit (events.js:215:7)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\websocket-driver\lib\websocket\driver\hybi.js:460:14)
[20:00:01] i ｢pswp｣: begin to generator skeleton screen
[20:00:01] ‼ ｢pswp｣:  TypeError: Cannot read property 'newPage' of null
    at Skeleton.newPage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:34:37)
    at Skeleton.genHtml (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:64:29)
    at H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:244:19
    at Array.map (<anonymous>)
    at Skeleton.renderRoutes (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:242:31)
    at SockJSConnection.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\server.js:144:57)
    at SockJSConnection.emit (events.js:210:5)
    at Session.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\transport.js:246:25)
    at WebSocketReceiver.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:104:39)
    at WebSocket.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:70:24)
    at WebSocket.emit (events.js:210:5)
    at WebSocket.dispatchEvent (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api\event_target.js:24:10)
    at WebSocket._receiveMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:142:10)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:34:49)
    at Hybi.emit (events.js:215:7)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\websocket-driver\lib\websocket\driver\hybi.js:460:14)
[20:04:46] i ｢pswp｣: begin to generator skeleton screen
[20:04:46] ‼ ｢pswp｣:  TypeError: Cannot read property 'newPage' of null
    at Skeleton.newPage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:34:37)
    at Skeleton.genHtml (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:64:29)
    at H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:244:19
    at Array.map (<anonymous>)
    at Skeleton.renderRoutes (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:242:31)
    at SockJSConnection.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\server.js:144:57)
    at SockJSConnection.emit (events.js:210:5)
    at Session.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\transport.js:246:25)
    at WebSocketReceiver.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:104:39)
    at WebSocket.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:70:24)
    at WebSocket.emit (events.js:210:5)
    at WebSocket.dispatchEvent (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api\event_target.js:24:10)
    at WebSocket._receiveMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:142:10)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:34:49)
    at Hybi.emit (events.js:215:7)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\websocket-driver\lib\websocket\driver\hybi.js:460:14)
[20:04:47] i ｢pswp｣: begin to generator skeleton screen
[20:04:47] ‼ ｢pswp｣:  TypeError: Cannot read property 'newPage' of null
    at Skeleton.newPage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:34:37)
    at Skeleton.genHtml (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:64:29)
    at H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:244:19
    at Array.map (<anonymous>)
    at Skeleton.renderRoutes (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:242:31)
    at SockJSConnection.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\server.js:144:57)
    at SockJSConnection.emit (events.js:210:5)
    at Session.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\transport.js:246:25)
    at WebSocketReceiver.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:104:39)
    at WebSocket.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:70:24)
    at WebSocket.emit (events.js:210:5)
    at WebSocket.dispatchEvent (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api\event_target.js:24:10)
    at WebSocket._receiveMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:142:10)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:34:49)
    at Hybi.emit (events.js:215:7)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\websocket-driver\lib\websocket\driver\hybi.js:460:14)
[20:05:45] i ｢pswp｣: begin to generator skeleton screen
[20:05:45] ‼ ｢pswp｣:  TypeError: Cannot read property 'newPage' of null
    at Skeleton.newPage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:34:37)
    at Skeleton.genHtml (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:64:29)
    at H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:244:19
    at Array.map (<anonymous>)
    at Skeleton.renderRoutes (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:242:31)
    at SockJSConnection.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\server.js:144:57)
    at SockJSConnection.emit (events.js:210:5)
    at Session.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\transport.js:246:25)
    at WebSocketReceiver.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:104:39)
    at WebSocket.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:70:24)
    at WebSocket.emit (events.js:210:5)
    at WebSocket.dispatchEvent (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api\event_target.js:24:10)
    at WebSocket._receiveMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:142:10)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:34:49)
    at Hybi.emit (events.js:215:7)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\websocket-driver\lib\websocket\driver\hybi.js:460:14)
[20:07:51] i ｢pswp｣: begin to generator skeleton screen
[20:07:51] ‼ ｢pswp｣:  TypeError: Cannot read property 'newPage' of null
    at Skeleton.newPage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:34:37)
    at Skeleton.genHtml (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:64:29)
    at H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:244:19
    at Array.map (<anonymous>)
    at Skeleton.renderRoutes (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\skeleton.js:242:31)
    at SockJSConnection.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\page-skeleton-webpack-plugin\src\server.js:144:57)
    at SockJSConnection.emit (events.js:210:5)
    at Session.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\transport.js:246:25)
    at WebSocketReceiver.didMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:104:39)
    at WebSocket.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\sockjs\lib\trans-websocket.js:70:24)
    at WebSocket.emit (events.js:210:5)
    at WebSocket.dispatchEvent (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api\event_target.js:24:10)
    at WebSocket._receiveMessage (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:142:10)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\faye-websocket\lib\faye\websocket\api.js:34:49)
    at Hybi.emit (events.js:215:7)
    at Hybi.<anonymous> (H:\php_web\phpStudy\WWW\1\qnvue\pay\node_modules\websocket-driver\lib\websocket\driver\hybi.js:460:14)

#解决办法

npm install puppeteer 的时候会默认下载一个Chromium 没必要下载。直接使用本地就可以

//node_modules\page-skeleton-webpack-plugin\src\skeleton.js
//26行
this.browser = await puppeteer.launch({ headless })
//改成
this.browser = await puppeteer.launch({ headless, executablePath: 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe' })

#看下日志 问题解决

 -> "[PSG] connected"
index.bundle.js:1 ? -> "[PSG] begin to generator skeleton screen"
index.bundle.js:1 ? -> "[PSG] generator skeleton screen successfully"
index.bundle.js:1 ? -> "[PSG] Browser open another page..."
index.bundle.js:1 ? -> "[PSG] Browser open another page..."
复制全文 生成海报 编程 错误处理 Web开发

推荐文章

PyAutoGUI是一个强大的跨平台Python库，允许用户通过编程控制鼠标和键盘操作，轻松实现自动化任务
2024-11-18 10:18:12 +0800 CST
MonkeyOCR：国产开源OCR新星，结构化识别更高效
2025-07-22 18:09:30 +0800 CST
Vue 3创建一个简单的文件上传组件，并处理上传的文件
2024-11-19 04:09:17 +0800 CST
✍️ 纯 CSS 实现打字效果（无需 JavaScript）
2025-05-15 10:26:06 +0800 CST
Rust中的异步编程，重点介绍了`async-std`库的安装、基本概念、异步函数、任务调度、异步I/O操作以及错误处理等内容
2024-11-17 21:59:47 +0800 CST
JS新特性：`?=`操作符助你告别bug！
2024-11-19 09:33:53 +0800 CST
2024年了,公司做一个官方网站需要多少钱?
2024-11-19 03:06:19 +0800 CST
Rust API 服务器：发送和接收字节数据
2024-11-18 18:17:46 +0800 CST
Vue 3 中的新 `<script setup>` 语法详解
2024-11-19 06:45:51 +0800 CST
Vue3中如何处理跨域请求？
2024-11-19 08:43:14 +0800 CST
在Vue3中使用`v-model`时，如何处理输入法编辑器（IME）输入导致的数据同步问题
2024-11-18 08:56:18 +0800 CST
Rust 异步 —— 让嵌入式编程更加简单
2024-11-18 03:21:42 +0800 CST
这个开源的AI证件照项目又火了！有人靠它日入300+
2024-11-19 09:20:16 +0800 CST
Docker 中运行并使用 WebRTC 的自托管虚拟浏览器
2024-11-19 03:03:55 +0800 CST
什么是Axios? 为什么要封装? 如何优雅地封装?
2024-11-17 21:34:28 +0800 CST
如何在Vue中处理动态路由？
2024-11-19 06:09:50 +0800 CST
效率翻倍！6 款不容错过的免费 AI 神器
2024-11-19 08:21:41 +0800 CST
Vue3中使用Vuex进行全局状态管理，通过创建一个简单的计数器应用展示Vuex的核心概念，包括状态、获取器、变更和动作
2024-11-18 22:57:33 +0800 CST
Shell脚本监控和管理Linux系统中的高CPU使用率进程
2024-11-19 06:13:28 +0800 CST
php使用文件锁解决少量并发问题
2024-11-17 05:07:57 +0800 CST
GoView是一个基于Vue3的低代码可视化开发设计器
2024-11-19 06:38:15 +0800 CST
使用Vue 和Axios从第三方API获取异步数据并展示
2024-11-19 04:03:24 +0800 CST
js只保留整数，向上取整，四舍五入，向下取整等函数
2024-11-18 20:47:21 +0800 CST
Pycairo是一个强大的Python库，用于绘制各种2D图形
2024-11-18 21:01:19 +0800 CST
如何在Vue3中使用组合API和watch监听数据变化？
2024-11-17 23:53:00 +0800 CST
PHP 压缩包脚本功能说明
2024-11-19 03:35:29 +0800 CST
html流光登陆页面
2024-11-18 15:36:18 +0800 CST
CSS 代码：去除网站颜色（灰度效果）
2024-11-18 16:49:46 +0800 CST
一个登录注册界面的HTML结构和样式
2024-11-17 20:33:23 +0800 CST
H5抖音商城小黄车购物系统
2024-11-19 08:04:29 +0800 CST
Go语言的并发编程，包括Mutex、RWMutex、WaitGroup和Channel等机制
2024-11-19 08:09:19 +0800 CST
Vue中的样式绑定是如何实现的？
2024-11-18 10:52:14 +0800 CST
EnsembleParticleSwarmOptimization（EPSO）是一个用于粒子群优化的Python库
2024-11-18 15:03:40 +0800 CST
Golang 中你应该知道的 noCopy 策略
2024-11-19 05:40:53 +0800 CST
PHPExcel读取xlsx模板文件并写入文件导出
2024-11-17 17:33:15 +0800 CST
一个轻量级、零依赖的JavaScript模糊搜索库，适用于前端和后端应用
2025-05-05 19:31:53 +0800 CST
Web应用中如何使用Vue3优化大数据量渲染以提升应用性能
2024-11-18 09:41:41 +0800 CST
纯 CSS 实现动画，童年玩具 “跳跳杆”
2024-11-19 06:44:40 +0800 CST
使用 Go 语言连接并操作 SQLite 数据库
2024-11-18 20:18:25 +0800 CST
如何通过封装自定义Hook来实现对localStorage的响应式监听，解决了在更改时区时相关组件无法实时更新的问题
2024-11-19 03:08:13 +0800 CST
如何在 Vue3 中实现组件级别的 CSS 模块化？
2024-11-18 09:57:40 +0800 CST
Vue3中的响应式属性的初始化有何变化？
2024-11-17 04:29:02 +0800 CST
Vue3中的状态管理：使用Pinia替代Vuex
2024-11-18 05:56:04 +0800 CST
Redis函数在PHP中的使用方法
2024-11-19 04:42:21 +0800 CST
容易触发微信 / 支付宝风控的关键行为整理
2025-07-21 16:11:37 +0800 CST
如何用 PHP 写一个简易版的网站备份工具
2024-11-18 10:58:52 +0800 CST
python 数据持久化最强方式：用 Shelve 储存你的数据
2024-11-19 03:48:50 +0800 CST
Go 语言 iota 解密：小设计解决大问题的智慧
2025-07-11 12:37:30 +0800 CST
一文读懂 React Bits：为你的网站注入创意动效 🧩
2025-07-14 10:22:02 +0800 CST
Vue3中如何处理组件的单元测试？
2024-11-18 15:00:45 +0800 CST
程序员茄子在线接单