当前位置： 首页 > news >正文

解决服务端渲染程序SSR运行时报错： ReferenceError: document is not defined

news 文章来源：https://blog.csdn.net/jiaohuizhuang6019/article/details/134800009 2024/11/16 15:26:09

现象：

 原因： 该错误表明在服务端渲染 (SSR) 过程中，有一些代码尝试在没有浏览器环境的情况下执行与浏览器相关的操作。这在服务端渲染期间是一个常见的问题，因为在服务端渲染期间是没有浏览器 API。

解决办法：

1. 修改原始代码： 避免在组件代码中使用dom的原生api

备注：组件代码是指.vue这样的程序文件，它会被打包到server-bundle这样的服务端渲染js程序中，运行环境是node, 所以没法识别这些dom对象的api。

 而js，ts文件则会打包到client-bundle的客户端渲染js程序中，是使用script标签嵌入html文件中，运行环境是浏览器，所以不会有这个问题：

2. 使用jsdom模拟浏览器环境：

在ssr服务端的启动程序中加入以下代码

const jsdom = require("jsdom");

const { JSDOM } = jsdom;

const dom = new JSDOM("<!DOCTYPE html><html><body></body></html>");

global.window = dom.window;

global.document = dom.window.document;

 

 但注意：jsdom的版本不可过高，否则会报错：SyntaxError: Unexpected token '||='

 

因为：  ||= 这个新的 JavaScript 语法，它是 ECMAScript 2022 中的新特性，但可能在当前的 Node.js 版本中不被支持，必须降低jsdom版本到兼容当前node版本的版本

相关文章：

解决服务端渲染程序SSR运行时报错： ReferenceError: document is not defined

现象&#xff1a; 原因&#xff1a; 该错误表明在服务端渲染 (SSR) 过程中&#xff0c;有一些代码尝试在没有浏览器环境的情况下执行与浏览器相关的操作。这在服务端渲染期间是一个常见的问题&#xff0c;因为在服务端渲染期间是没有浏览器 API。 解决办法&#xff1a; 1. 修…...

编程日记 2023/12/6 11:43:17

【漏洞复现】狮子鱼任意文件上传漏洞

漏洞描述 狮子鱼CMS（Content Management System）是一种网站管理系统，旨在帮助用户更轻松地创建和管理网站。它具有用户友好的界面和丰富的功能，包括页面管理、博客、新闻、产品展示等。 狮子鱼CMS使用简单直观的管理界面，使得网站所有者可以方便地进行内容的发布、管理和…...

编程日记 2023/12/6 11:42:16

LINUX 下部署github仓库

打开tumx django-admin startproject project_name #创建django项目 project_name配置git ssh-keygen # 生成密钥 连接 github 在github中打开setting 添加密钥 并且允许 write access git init # 把当前文件夹配置为git仓库 git config --global user.name xxx git config --g…...

编程日记 2023/12/6 11:41:15

CentOS中安装数据库

1.下载 网址&#xff1a;https://dev.mysql.com/downloads/mysql/ 按如图选择&#xff0c;然后点击Download 这里它让我们登录&#xff0c;我们直接选择不登录&#xff0c;直接下载 2.关闭防火墙 systemctl disable firewalld3.正式安装 切换到/usr/local下 cd /usr/l…...

编程日记 2023/12/6 11:39:13

GPT-Crawler一键爬虫构建GPTs知识库

GPT-Crawler一键爬虫构建GPTs知识库 写在最前面安装node.js安装GPT-Crawler启动爬虫结合 OpenAI自定义 assistant自定义 GPTs&#xff08;笔者用的这个&#xff09; 总结 写在最前面 GPT-Crawler一键爬虫构建GPTs知识库 能够爬取网站数据&#xff0c;构建GPTs的知识库&#xf…...

编程日记 2023/12/6 11:38:12

在微信小程序中如何改变默认打开的页面

在微信小程序中&#xff0c;在我们编写页面的时候&#xff0c;可能会在重新渲染的时候导致页面跳转到默认打开的页面上&#xff0c;为了提升用户的一个体验&#xff0c;我们可以设置一些内容来修改小程序默认打开的页面&#xff0c;提升开发者的开发体验。 当我们打开一个微信…...

编程日记 2023/12/6 11:37:12

Ardupilot开源飞控之VTOL之旅：配件试装

Ardupilot开源飞控之VTOL之旅&#xff1a;配件试装 1. 源由2. 分析2.1 【修改使用】FC & PDB & GPS打印件2.2 【直接使用】VTX & CRSF打印件 3. 试装3.1 【结构】问题1&#xff1a;GPS座子尺寸非常紧凑&#xff0c;需要用力压入卡座内。3.2 【结构】问题2&#xff…...

编程日记 2023/12/6 11:36:11

STM32-GPIO

一、GPIO简介 GPIO&#xff08;General Purpose Input Output&#xff09;通用输入输出口 可配置8种输入输出模式 引脚电平&#xff1a;0V~3.3V&#xff0c;部分引脚可容忍5V 输出模式下&#xff1a;可控制端口输出高低电平&#xff0c;用以驱动LED、控制蜂鸣器、模拟通信协议输…...

编程日记 2023/12/6 11:34:08

MySQL的事务

<!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <title>MySQL的事务</title> </head> <body> <!-- 事务是一组操作的集合&#xff0c;它是一个不可分隔的工作单位&#xff0c;事务会把所有的操作作…...

编程日记 2023/12/6 11:33:08

go-carbon v2.2.14 发布，轻量级、语义化、对开发者友好的 Golang 时间处理库

carbon 是一个轻量级、语义化、对开发者友好的 golang 时间处理库&#xff0c;支持链式调用。 目前已被 awesome-go 收录&#xff0c;如果您觉得不错&#xff0c;请给个 star 吧 github.com/golang-module/carbon gitee.com/golang-module/carbon 安装使用 Golang 版本大于…...

编程日记 2023/12/6 11:32:07

解决 IIS HTTP 403 错误问题

最近上传附件 IIS 总是返回 HTTP 403 错误，在踩了很多配置的坑之后，终于把问题解决了，于是特意写了本篇文章。 虽然网络上的文章不少，大都写的没错，但是他们没有很清晰的把问题描述清楚，导致一些新手在看这些文章跟着处理问题的时候难免会踩坑，于是我就以我踩坑的经验写…...

编程日记 2023/12/6 11:31:06

字符设备驱动基础—并发控制

一、上下文和并发场合 执行流&#xff1a;有开始有结束总体顺序执行的一段代码 又称上下文 应用编程&#xff1a;任务上下文 内核编程&#xff1a; 任务上下文&#xff1a;五状态 可阻塞 a. 应用进程或线程运行在用户空间 b. 应用进程或线程运行在内核空间&#xff08;通过调…...

编程日记 2023/12/6 11:30:05

5-Tornado入门、程序的原理图、tornado不能使用同步代码的演示

安装 pip install tornado第一个程序 from tornado import web from tornado import ioloop class IndexHandler(web.RequestHandler):def get(self):self.write(Hello Tornado!!123)if __name__ __main__:# 1.创建了app对象&#xff0c;设置路由,并开启debug模式app web.A…...

编程日记 2023/12/6 11:28:03

mysql原理--InnoDB记录结构

1.InnoDB行格式 我们平时是以记录为单位来向表中插入数据的&#xff0c;这些记录在磁盘上的存放方式也被称为 行格式 或者 记录格式 。 设计 InnoDB 存储引擎的大叔们到现在为止设计了4种不同类型的 行格式 &#xff0c;分别是 Compact 、 Redundant 、Dynamic 和 Compressed 行…...

编程日记 2023/12/6 11:24:01

ES6基础语法

目录 一、解构 数组解构 对象解构 字符串解构 数值解构 布尔值解构 二、箭头函数 和普通函数区别? 三、拓展运算符 ... 一、解构 给右侧值匹配对应的变量 等号两侧模式一定要匹配 数组解构 /*** 解构&#xff1a;从数组或者对象中提取值&#xff0c;给变量进行赋值操作就…...

编程日记 2023/12/6 11:21:59

java8 常用code

文章目录 前言一、lambda1. 排序1.1 按照对象属性排序&#xff1a;1.2 字符串List排序&#xff1a;1.3 数据库排序jpa 2. 聚合2.1 基本聚合&#xff08;返回对象list&#xff09;2.2 多字段组合聚合&#xff08;直接返回对象list数量&#xff09; 二、基础语法2.1 List2.1.1 数…...

编程日记 2023/12/6 11:16:55

docker 镜像管理

搜索镜像&#xff1a;这种方法只能用于官方镜像库搜索基于 centos 操作系统的镜像# docker search centos ​按星级搜索镜像&#xff1a; 查找 star 数至少为 100 的镜像&#xff0c;默认不加 s 选项找出所有相关 ubuntu 镜像&#xff1a; # docker search ubun…...

编程日记 2023/12/6 11:12:51

Jira 中如何修改时间为绝对时间

问题描述 在使用Jira的时候&#xff0c;有一些时间显示的是相对时间&#xff0c;如&#xff1a;2天前&#xff0c;3个小时前等&#xff0c;有些用户不习惯这样的显示方式&#xff0c;希望使用绝对的时间格式&#xff0c;如&#xff1a;2022年2月22日 22:22 应该怎样修改 解…...

编程日记 2023/12/6 11:10:50

班级查分软件制作教程：老师必备技能！

首先&#xff0c;你需要选择一个合适的软件平台来制作班级查分软件。推荐使用群发成绩&#xff0c;因为它是一个功能强大且易于使用的在线查询系统&#xff0c;可以帮助你快速高效地制作班级查分软件​。 在制作班级查分软件之前&#xff0c;你需要准备好学生的成绩数据。这可以…...

编程日记 2023/12/6 11:09:49

Linux 的性能调优的思路

Linux操作系统是一个开源产品&#xff0c;也是一个开源软件的实践和应用平台&#xff0c;在这个平台下有无数的开源软件支撑&#xff0c;我们常见的apache、tomcat、mysql等。 开源软件的最大理念是自由、开放&#xff0c;那么Linux作为一个开源平台&#xff0c;最终要实现的是…...

编程日记 2023/12/6 11:07:47

如何通过webdriver禁用浏览器定位功能

今天碰到一个小问题&#xff0c;在使用了代理ip的情况下访问某些站点&#xff0c;但是还是显示本地的ip地址&#xff0c;这个是什么问题呢&#xff0c;原来是谷歌浏览器默认打开了定位功能 那么问题来了&#xff0c;如何在使用webdriver的时候关闭浏览器的定位功能呢&#xff1…...

编程日记 2023/12/6 11:03:43

网卡bonding绑定

目录 一、概念 1、概述&#xff1a; 二、实验 1、绑定案例&#xff1a; 一、概念 1、概述&#xff1a; 将多个物理网卡进行排列组合&#xff0c;形成逻辑网卡&#xff0c;网卡的高可用 绑定模式 mode0&#xff08;平衡负载模式&#xff09;&#xff1a;平时两块网卡均工…...

编程日记 2023/12/6 11:02:42

flink运行报Exception in thread “main“ java.lang.IllegalStateException

问题描述 运行flink程序时报异常&#xff0c;异常信息如下&#xff1a; Exception in thread "main" java.lang.IllegalStateException: No ExecutorFactory found to execute the application.at org.apache.flink.core.execution.DefaultExecutorServiceLoader.g…...

编程日记 2023/12/6 11:01:41

易点易动设备管理系统--提升设备备品备件管理效率的工具

设备备品备件管理是市场推广人员关注的重要问题之一。为了帮助市场推广人员提升设备备品备件管理效率&#xff0c;易点易动设备管理系统应运而生。本文将详细介绍易点易动设备管理系统的功能和优势&#xff0c;以及如何借助该系统提高设备备品备件管理效率&#xff0c;提升企业…...

编程日记 2023/12/6 10:59:39

第二十一章——网络通信

一.网络程序设计基础 1.局域网与互联网 2.网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。 1.1 TCP/IP层次结构 2.TCP与UDP协议 TCP可保证数据从一端送至另一端时&#xff0c;能够确实送达&#xff0c;而且抵达的数据的排列顺序和送出时的顺序相…...

编程日记 2023/12/6 10:57:37

Siemens-NXUG二次开发-打开与关闭prt文件[Python UF][20231206]

Siemens-NXUG二次开发-打开与关闭prt文件[Python UF][20231206] 1.python uf函数1.1 NXOpen.UF.Part.Open1.2 NXOpen.UF.Part.LoadStatus1.3 NXOpen.UF.Part.Close1.4 NXOpen.UF.Part.AskUnits 2.示例代码3.运行结果3.1 内部模式3.2 外部模式 1.python uf函数 1.1 NXOpen.UF.P…...

编程日记 2023/12/6 10:55:35

2015年五一杯数学建模C题生态文明建设评价问题解题全过程文档及程序

2015年五一杯数学建模 C题 生态文明建设评价问题 原题再现 随着我国经济的迅速发展&#xff0c;生态文明越来越重要&#xff0c;生态文明建设被提到了一个前所未有的高度。党的十八大报告明确提出要大力推进生态文明建设&#xff0c;报告指出“建设生态文明&#xff0c;是关系…...

编程日记 2023/12/6 10:53:33

java：slf4j、log4j、log4j2、logback日志框架的区别与示例

文章目录 背景SLF4J - 简单日志门面:Log4j - 强大而古老的日志框架:Log4j2 - Log4j的升级版:Logback - Log4j的继任者:比较Springboot集成slf4j、log4j2参考 背景 在Java开发中&#xff0c;日志记录是一个不可或缺的组成部分。为了满足不同的需求&#xff0c;Java社区涌现出多…...

编程日记 2023/12/6 10:52:32

Mysql学习查缺补漏----02 mysql之DCL 数据控制语言

查看数据库里都有哪些用户。 使用root任何一个用户都可以登录。 本机登录。 也可以这样登录其他的机器。 、 修改user表。 刷新权限&#xff1a; 现在我们看到了只有本机才能登陆。 我们这样就可以限制这个mysql指定某台服务器登录。 详解忘记密码以及如何修改用户密码 我们…...

编程日记 2023/12/6 10:47:28

【Flink基础】-- 延迟数据的处理

目录 ​一、关于延迟的一些概念 1、什么是延迟？ 2、什么导致互联网延迟？...

编程日记 2023/12/6 10:45:26

爱墙 网站怎么做/网络销售新手入门

输出打印没有乱码&#xff0c;插入到数据库时乱码。数据库的编码&#xff1a;piplines类的代码如下&#xff1a;class KGbookmysql(object):def process_item(self, item, spider):将爬取到的信息保存到mysql数据库#将数据从item中提取出来title item[title]author item[auth…...

编程日记 2024/11/16 15:17:21

此网站建设于美利坚/软文广告经典案例300

一 本次通过一个简单的C/CLI控制台程序&#xff0c;能使学习者有对C/CLI程序有个个大概的印象&#xff0c;同时引出一些基本的概念和关键字。下面是程序代码&#xff1a; #include <iostream>#include <string>//1 ISOCpublicclassNativeClass{public: NativeCl…...

编程日记 2024/11/16 12:04:55

wordpress 主页添加来源/网站推广的渠道有

# 文件和代码模板在这个部分&#xff1a;* 文件和代码模板* [概述](#概述)* [项目和默认方案](#项目和默认方案)* [预定义、内部和定制模板](#预定义、内部和定制模板)* [什么时候使用文件和代码模板](#什么时候使用文件和代码模板)* [解析指令](/如何使用/常规指南/文件和代码…...

编程日记 2024/11/16 11:03:02

珠海做网站优化的公司/万网阿里云域名查询

怪自己大学C语言学的不扎实&#xff0c;下面的程序看了好久才破解&#xff0c;大神见谅&#xff0c;写下总结吧 程序先贴出来&#xff1a; 定义如下&#xff1a;子程序如下&#xff1a;实际调用如下刚开始看的时候&#xff0c;死活没搞懂&#xff0c;后来通过验证什么的弄懂了&…...

编程日记 2024/11/16 5:51:21

监控做斗鱼直播网站/有道搜索引擎入口

&#xfeff;&#xfeff;作者 | Moses Olafenwa翻译 | 林椿眄出品 | 人工智能头条&#xff08;公众号ID&#xff1a;AI_Thinker&#xff09;作为人工智能的一个重要领域&#xff0c;计算机视觉是一门可以识别并理解图像和场景的计算机及软件系统科学。该领域主要包括图像识别&…...

编程日记 2024/11/16 5:25:12

用wordpress好吗/黑龙江头条今日新闻

欢迎您戳蓝色字“工数平台”持续关注我们哟&#xff01;导言在当今中国的各个领域&#xff0c;“弯道超车”是个经常被提及的口号&#xff0c;然而常识和交规告诉我们&#xff0c;弯道不仅不能超车还得减速&#xff0c;超车极其危险。仔细解读“弯道超车”&#xff0c;其实还暗…...

编程日记 2024/11/16 4:43:28