解决vue依赖报错SockJSServer.js出现Cannot read property ‘headers‘ of null

前言

在做新的需求需要变更vue的项目代码时突然出现报错

TypeError: Cannot read property ‘headers’ of null at Server.socket.on (***/node_modules/webpack-dev-server/lib/servers/SockJSServer.js:68:32)

不清楚为什么突然出现了这个问题,之前在这个vue项目进行改动也是正常的,那么也说一下我的解决方法

解决步骤

问题复现

首先是package.json情况:

{
  "name": "manufacturing-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && cd dist/prod && jar -cvf manufacturing-vue.war *",
    "test": "vue-cli-service build --mode test && cd dist/test && jar -cvf manufacturing-vue.war *",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ui5/webcomponents": "^1.0.0-rc.5",
    "axios": "^0.19.2",
    "core-js": "^2.6.5",
    "element-ui": "^2.12.0",
    "js-cookie": "^2.2.1",
    "pixi.js": "^5.3.7",
    "three": "^0.123.0",
    "three-js": "^79.0.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1",
    "xlsx": "^0.15.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "element-theme-chalk": "^2.12.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "gulp": "^4.0.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.0",
    "uglify-es": "^3.3.9",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "prettier": {
    "printWidth": 160
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

此时使用npm run serve运行程序:
报错信息如下:

xxx\node_modules\webpack-dev-server\lib\servers\SockJSServer.js:67
      f(connection, connection.headers);
                               ^

TypeError: Cannot read property 'headers' of null
    at Server.<anonymous> (xxx\node_modules\webpack-dev-server\lib\servers\SockJSServer.js:67:32)
    at Server.emit (events.js:400:28)
    at App.emit (xxx\node_modules\sockjs\lib\sockjs.js:196:29)
    at xxx\node_modules\sockjs\lib\transport.js:111:25
    at processTicksAndRejections (internal/process/task_queues.js:77:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! manufacturing-vue@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the manufacturing-vue@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     xxx\npm-cache\_logs\2023-06-27T01_38_41_040Z-debug.log

分析

这是一个TypeError类型的错误,报错位置在SockJSServer.js中第67行,具体错误信息是“Cannot read property ‘headers’ of null”,意思是null对象无法读取属性’headers’,因为null并没有该属性。错误是在尝试使用连接的headers属性时发生的。可能的原因是connection对象为null或未定义

查找百度:


点击查看报错分析


在这里插入图片描述

发现它已经是被修复状态

点击内部的git链接,修复的信息为:


报错修复提交信息


同时查找它的修复问题的版本为3.8.1

意味着需要安装版本大于3.8.1的webpack-dev-server就可以解决修复该问题

问题解决

使用安装命令

npm install webpack-dev-server@3.9.0

理论上,只需要安装的webpack-dev-server的版本大于3.8.1,就可以解决这个报错

此时,package.json的安装情况:

{
  "name": "manufacturing-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && cd dist/prod && jar -cvf manufacturing-vue.war *",
    "test": "vue-cli-service build --mode test && cd dist/test && jar -cvf manufacturing-vue.war *",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@ui5/webcomponents": "^1.0.0-rc.5",
    "axios": "^0.19.2",
    "core-js": "^2.6.5",
    "element-ui": "^2.12.0",
    "js-cookie": "^2.2.1",
    "pixi.js": "^5.3.7",
    "three": "^0.123.0",
    "three-js": "^79.0.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1",
    "xlsx": "^0.15.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "element-theme-chalk": "^2.12.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "gulp": "^4.0.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.0",
    "uglify-es": "^3.3.9",
    "vue-template-compiler": "^2.6.10",
    "webpack-dev-server": "3.9.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "prettier": {
    "printWidth": 160
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

与之前相比多了一个

"webpack-dev-server": "3.9.0"

但是值得一提的是,当我想尝试移除安装的webpack-dev-server 使用命令

npm uninstall webpack-dev-server

想复现问题截图的时候,发现此时运行程序变为正常了

结语

以上就是我解决该报错的步骤

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/32348.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【安全】使用docker安装Nessus

目录 一、准备docker环境服务器&#xff08;略&#xff09; 二、安装 2.1 搜索镜像 2.2 拉取镜像 2.3 启动镜像 三、离线更新插件 3.1 获取challenge 3.2 官方注册获取激活码 3.3 使用challenge码和激活码获取插件下载地址 3.4 下载的插件以及许可协议复制到容器内 四…

数据结构第六章 图 6.4 图的应用 错题整理

4.A A. 不是简单路径的话&#xff0c;有环&#xff0c;去环路径会更短 B. 适合的 弗洛伊德算法才不适合 C. 本来就是 D 2X2矩阵拓展到3X3矩阵 再扩大 若是子集 即加入新顶点后&#xff0c;最短路径都没有变&#xff0c;错 5.B 本题用弗洛伊德更合适 但这道题只需全部代入求最…

PowerShell系列(七)PowerShell当中的Provider介绍

往期回顾PowerShell系列&#xff08;一&#xff09;&#xff1a;PowerShell介绍和cmd命令行的区别 PowerShell系列&#xff08;二&#xff09;&#xff1a;PowerShell和Python之间的差异介绍 PowerShell系列&#xff08;三&#xff09;&#xff1a;PowerShell发展历程梳理 P…

@DateTimeFormat与@JsonFormat不完全解析

目录 前言测试代码DateTimeFormat不加任何注解的情况普通请求JSON请求 JsonFormat普通请求JSON请求 其他方式&#xff08;InitBinder&#xff09;结论源码地址 前言 一直以来对DateTimeFormat与JsonFormat 比较模糊&#xff0c;容易搞忘&#xff0c;今天就做个笔记&#xff0c…

UE4自定义资产类型编辑器实现

在虚幻引擎中&#xff0c;资产是具有持久属性的对象&#xff0c;可以在编辑器中进行操作。 Unreal 附带多种资源类型&#xff0c;从 UStaticMesh 到 UMetasoundSources 等等。 自定义资源类型是实现专门对象的好方法&#xff0c;这些对象需要专门构建的编辑器来进行高效操作。 …

SQL语言的四大组成部分——DCL(数据控制语言)

1️⃣前言 SQL语言中的DCL&#xff08;Data Control Language&#xff09;是一组用于控制数据库用户访问权限的语言&#xff0c;主要包括GRANT、REVOKE、DENY等关键字。 文章目录 1️⃣前言2️⃣DCL语言3️⃣GRANT关键字4️⃣REVOKE关键字5️⃣DENY关键字6️⃣总结附&#xff1…

【kubernetes】部署网络组件Calico与CoreDNS

前言:二进制部署kubernetes集群在企业应用中扮演着非常重要的角色。无论是集群升级,还是证书设置有效期都非常方便,也是从事云原生相关工作从入门到精通不得不迈过的坎。通过本系列文章,你将从虚拟机配置开始,到使用二进制方式从零到一搭建起安全稳定的高可用kubernetes集…

基于YOLO V8的车牌识别

赵春江 2023年6月 1、前言 十年前就想实现车牌识别这项任务&#xff0c;虽然当时这项技术就已较成熟&#xff08;与现在的实现方法不同&#xff09;&#xff0c;但那时的我还具备这个能力。弹指一瞬间&#xff0c;没想到十年间人工智能技术已经发展到一个新的高度&#xff0c…

Nacos架构与原理 - 健康检查机制

文章目录 注册中心的健康检查机制Nacos 健康检查机制临时实例健康检查机制永久实例健康检查机制集群模式下的健康检查机制 注册中心的健康检查机制 想象发生地质灾害,被掩埋在废墟下,搜救队需定位才能施救。两种方法: 大喊求救,告知位置与健康状况,让搜救队知晓搜救队使用专业…

社区活动 | OpenVINO™ DevCon 中国系列工作坊第二期 | 使用 OpenVINO™ 加速生成式 AI...

生成式 AI 领域一直在快速发展&#xff0c;许多潜在应用随之而来&#xff0c;这些应用可以从根本上改变人机交互与协作的未来。这一最新进展的一个例子是 GPT 模型的发布&#xff0c;它具有解决复杂问题的能力&#xff0c;比如通过医学和法律考试这种类似于人类的能力。然而&am…

CnOpenData数字经济专利申请与授权数据

一、数据简介 自人类社会进入信息时代以来&#xff0c;数字技术的快速发展和广泛应用衍生出数字经济。与农耕时代的农业经济、工业时代的工业经济大有不同&#xff0c;数字经济是一种新的经济、新的动能、新的业态&#xff0c;并引发了社会和经济的整体性深刻变革。现阶段&…

openEuler操作系统禁用 Nouveau

目录 一、什么是openEuler 二、什么是Nouveau 三、禁用Nouveau Liunx系统安装NVIDIA显卡驱动时需要禁用Nouveau&#xff0c;openEuler操作系统也不例外&#xff0c;但是网上openEuler操作系统如何禁用Nouveau的资料比较少&#xff0c;而且基本都不靠谱&#xff0c;我找到一个…

Keras-深度学习-神经网络-人脸识别模型

目录 模型搭建 模型训练 模型搭建 ①导入所需的库&#xff0c;导入了 Keras 和其他必要的库&#xff0c;用于构建和处理图像数据。 from keras.models import Sequential from keras.layers import Dense, Flatten, Conv2D, MaxPooling2D import os from PIL import Image …

streamlit——搭建学生评分网站(告别问卷星)

streamlit搭建多人评分网站 文章目录 streamlit搭建多人评分网站一、引言二、数据准备三、streamlit代码四、数据合并代码 一、引言 当需要对班级内多人进行打分时&#xff0c;为了不使用问卷星等平台进行评分&#xff0c;使用pandas进行操作数据&#xff0c;使用streamlit进行…

chatgpt赋能python:Python要点:从入门到精通

Python要点&#xff1a;从入门到精通 Python是一门高级编程语言&#xff0c;是一种解释型、面向对象、动态数据类型的语言。它的设计思想是“代码易读易写”&#xff0c;在数据科学、人工智能、自动化测试、Web开发等领域广泛应用。本文将从入门到精通的角度来介绍Python的要点…

内网穿透技术

文章目录 前言1. 安装JAVA2. MCSManager安装3.局域网访问MCSM4.创建我的世界服务器5.局域网联机测试6.安装cpolar内网穿透7. 配置公网访问地址8.远程联机测试9. 配置固定远程联机端口地址9.1 保留一个固定tcp地址9.2 配置固定公网TCP地址9.3 使用固定公网地址远程联机 转载自内…

自学黑客(网络安全),一般人我劝你还是算了吧(自学网络安全学习路线--第九章 Internet安全协议)【建议收藏】

文章目录 一、自学网络安全学习的误区和陷阱二、学习网络安全的一些前期准备三、自学网络安全学习路线一、安全协议概述二、IPSec协议1、概述2、IP封装过程3、IPSec不安全性4、IPSec的功能5、IPSec体系结构6、IPSec的AH7、IPSec的AH8、IPSec的ESP9、IPSec的ESP10、ISAKMP11、IK…

中职网络搭建(服务器)—Linux LVM(标准答案)

题目要求如下 使用fdisk-l查看磁盘信息 我们添加的磁盘分别是sdb和sdc Fdisk /dev/sdb 依次输入n,p,1&#xff0c;回车,2G &#xff08;新建2G的主分区&#xff09; 依次输入n,e,2&#xff0c;回车&#xff0c;回车&#xff08;使用剩余的全部空间建立扩展分区&#xff09; 依…

高德地图的使用

JS API 结合 Vue 使用 高德地图 jsapi 下载、引入 npm add amap/amap-jsapi-loaderimport AMapLoader from amap/amap-jsapi-loader 使用2.0版本的loader需要在window对象下先配置 securityJsCode JS API 安全密钥使用 JS API 使用 script 标签同步加载增加代理服务器设置…

数据挖掘(6.1)--神经网络

目录 神经网络简介 BP算法 Delta学习规则的基本原理 BP神经网络的结构 BP神经网络的算法描述 神经网络训练一般步骤 后向传播算法的主要步骤 优缺点 BP算法简单举例 神经网络简介 神经网络是一种计算模型&#xff0c;它受到人脑处理信息的生物神经网络过程的启发。人…