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

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

  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开发

推荐文章

前端接口防止重复请求的实现方案，主要通过axios拦截器来处理请求和响应
2024-11-19 08:37:02 +0800 CST
如何在Vue中创建一个简单的表单并处理表单提交
2024-11-17 07:47:15 +0800 CST
php内置函数除法取整和取余数
2024-11-19 10:11:51 +0800 CST
定制开发一个App到底需要多少钱？
2024-11-19 01:06:47 +0800 CST
Python包用于缓存函数的返回结果，以便持久化并保存在本地
2024-11-18 10:34:48 +0800 CST
Vincent是一个基于Python的数据可视化库，旨在通过简单的代码快速生成复杂的图表
2024-11-19 04:09:19 +0800 CST
PHP 8.5 新特性预览：提升开发体验的几个亮点
2025-07-07 07:32:52 +0800 CST
Python 中提升生产力的 12 个代码示例
2024-11-18 11:34:55 +0800 CST
一个有趣的进度条
2024-11-19 09:56:04 +0800 CST
使用Vue 3实现无刷新数据加载
2024-11-18 17:48:20 +0800 CST
FastAPI是一个现代化、高性能的PythonWeb框架，易于学习和使用。它支持快速编码、请求验证和自动文档生成
2024-11-18 23:34:20 +0800 CST
Go 语言流式处理，高效完成 HTTP 大数据请求
2024-11-18 22:06:27 +0800 CST
lilendian是一个用于处理字节序问题的Python库，能够简化在网络编程和数据处理中的字节序转换
2024-11-19 00:33:18 +0800 CST
Linux 网站访问日志分析脚本
2024-11-18 19:58:45 +0800 CST
告别重复造轮子！Animista：在线CSS动画生成器的终极指南与实战技巧
2025-09-01 08:26:44 +0800 CST
告别PS！Vue-Cropper终极指南：在Web端实现专业级图片裁剪与优化
2025-09-01 07:37:45 +0800 CST
ios使用fixed布局input,textarea错乱的解决方法
2024-11-19 05:19:20 +0800 CST
Rust 异步 —— 让嵌入式编程更加简单
2024-11-18 03:21:42 +0800 CST
如何在前端避免重排（Reflow）和重绘（Repaint）
2024-11-19 02:28:18 +0800 CST
三种高效获取图标资源的平台
2024-11-18 18:18:19 +0800 CST
Vue中如何使用API发送异步请求？
2024-11-19 10:04:27 +0800 CST
JavaScript 上传文件的几种方式
2024-11-18 21:11:59 +0800 CST
100多个基础常用JS函数和语法集合大全
2024-11-19 06:30:20 +0800 CST
告别Mock.js：现代前端API模拟解决方案深度实践
2025-03-30 09:19:22 +0800 CST
Golang 中你应该知道的 Range 知识
2024-11-19 04:01:21 +0800 CST
软件定制开发流程
2024-11-19 05:52:28 +0800 CST
PHP 使用代理 IP 通过 cURL 请求数据
2024-11-19 02:52:08 +0800 CST
PHP openssl 生成公私钥匙
2024-11-17 05:00:37 +0800 CST
MySQL数据库的36条军规
2024-11-18 16:46:25 +0800 CST
Vue3和公共天气API（如OpenWeatherMap）构建一个简易的天气查询应用
2024-11-19 06:21:52 +0800 CST
csvkit是一个功能强大的Python库，专门用于处理CSV文件
2024-11-19 04:53:20 +0800 CST
Astro是一款现代的JavaScriptWeb框架，特别适合构建内容驱动型网站，如博客和企业官网
2024-11-18 16:13:37 +0800 CST
Go方法集完全指南：从原理到实战的深度解析
2025-09-11 19:11:24 +0800 CST
使用 Vue3 和 Axios 实现 CRUD 操作
2024-11-19 01:57:50 +0800 CST
如何在Vue3中使用音频库Howler.js实现音频播放？
2024-11-18 15:35:49 +0800 CST
Go 1.25 slog全解析：结构化日志与多Handler实战指南
2025-08-30 19:36:22 +0800 CST
在 Rust 中使用 OpenCV 进行绘图
2024-11-19 06:58:07 +0800 CST
JavaScript 格式化数字、金额、千分位、保留几位小数、四舍五入
2024-11-19 09:32:08 +0800 CST
Vue Vben Admin：28.6k Star 的 Vue3 中后台模板王者
2025-06-28 16:54:53 +0800 CST
什么是 Vue 的服务端渲染（SSR）？它与客户端渲染的区别是什么？
2024-11-18 09:40:45 +0800 CST
使用 Gomail 在 Go 语言中轻松实现邮件发送功能及 Mailtrap 测试指南
2024-11-18 21:14:22 +0800 CST
自定义input文件上传 file的提示文字及样式
2024-11-17 05:01:13 +0800 CST
PC端与移动端兼容性适配方案全解析
2025-05-06 09:08:03 +0800 CST
在 Go 语言中使用 Wire 进行依赖注入
2024-11-19 08:47:21 +0800 CST
Python HTTP服务器：最强工具，让你轻松搭建本地服务器！
2024-11-18 22:22:29 +0800 CST
前端代码规范 - 图片相关
2024-11-19 08:34:48 +0800 CST
Vue3 中引入的 Vue Router 4 与 Vue Router 3 有哪些不同之处？
2024-11-19 01:06:37 +0800 CST
rangeSlider进度条滑块
2024-11-19 06:49:50 +0800 CST
在线上香平台：现代祈福的新方式
2024-11-19 02:41:19 +0800 CST
js函数常见的写法以及调用方法
2024-11-19 08:55:17 +0800 CST
程序员茄子在线接单