记录一次关于Nuxt3报TypeError: Cannot read properties of null (reading 'parentNode')

版本描述:

nuxt:v3.7.4

vue:v3.3.4

node:v18.16.0

pnpm: v8.6.2

问题描述

当网速较慢的用户在新页面获取内容之前多次点击NuxtLink时,就会报错,dom直接渲染不出来,网站无响应卡素死,需要刷新才能恢复功能,报错如下图

复现问题

打开控制台->network->网络切换成slow 3G->点击其他页面跳转,在没有渲染出页面之前,请立刻多次点击这个页面的link,就会报错。

解决问题

报错的提示是渲染的时候parentNode不存在,分析得知大概率是vue的问题。

通过nuxt上面这个issuegithub.com/nuxt/nuxt/i...有了解决思路。 这个问题其实跟nuxt的版本没有太大关系,就算升级到最新的nuxt版本也没有用, 所以也尝试了直接升级vue到最新的3.3.10版本,遗憾的是问题没有解决。

接着通过点击报错的文件进去看到parentNode: (node) => node.parentNode,发现这个没有做判空处理,通过issue里面的一些大佬的描述,最后是给 @vue/runtime-dom 这个包patch,刚好pnpm>=v7.11.0 有patch功能,这里需要注意一下,pnpm的版本。

话不多说,来上重点吧

bash 复制代码
pnpm patch @vue/runtime-dom
  • 在项目控制台执行这段代码会生成如下的提示
  • 在本地找到上面提示的文件夹->打开dist文件夹->在runtime-dom.esm-bundler.js进行修改
  • 在文件内找到这段代码做个判空处理

parentNode: (node) => node.parentNode 替换成 parentNode: (node) => node ? node.parentNode : null

  • 修改保存后在项目控制台运行下面代码

pnpm patch-commit C:\Users\31303\AppData\Local\Temp\43845abc39a6abbd54a

  • 如果在项目里看到这些信息就表明补丁添加成功

后面项目组同学在pnpm i的时候也会进行安装,另外在node_modules里面的@vue/runtime-dom对应文件也可以看到相应的内容被修改了

这里有个地方需要注意的是,安装包的时候用pnpm,运行build的时候也一定要用pnpm,否则会有你预想不到的问题

按照如上的步骤,依次进行,问题顺利解决,如果比较着急的同学可以先这么处理,不着急的同学还是等Vue官方在某个版本解决吧。

遇到问题并不可怕,重要的是解决问题的能力,欢迎大家留言,一起共同进步

相关推荐
随风一样自由13 小时前
React中实现iframe嵌套登录页面:跨域与状态同步解决方案详解
前端·react.js·前端框架·跨域
测试人社区—527213 小时前
破茧成蝶:DevOps流水线测试环节的效能跃迁之路
运维·前端·人工智能·git·测试工具·自动化·devops
_菜鸟果果14 小时前
vue-amap高德地图绘制线路轨迹
前端·vue.js·elementui
一个处女座的程序猿O(∩_∩)O14 小时前
React Native vs React Web:深度对比与架构解析
前端·react native·react.js
n***i9514 小时前
前端技术的下一场进化:从工程化走向智能化的全面重构
前端·重构
@大迁世界14 小时前
紧急:React 19 和 Next.js 的 React 服务器组件存在关键漏洞
服务器·前端·javascript·react.js·前端框架
晓得迷路了14 小时前
栗子前端技术周刊第 109 期 - Vite 8 Beta、JavaScript 三十周年、Prettier 3.7...
前端·javascript·vite
Terry_Tsang14 小时前
ceph mon 报错 full ratio(s) out of order 解决方法
服务器·前端·ceph
韩曙亮14 小时前
【Web APIs】元素偏移量 offset 系列属性 ④ ( offset 属性案例 - 放大镜效果 )
前端·javascript·css·html·offset·dom·web apis
宁雨桥14 小时前
前端网页加载进度条实现指南:Vue3+Vite工程化场景
前端·javascript·性能优化