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

现象:

 原因: 该错误表明在服务端渲染 (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版本的版本

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2023传智杯-新增场次】第六届传智杯程序设计挑战赛AB组-DEF题复盘解题分析详解【JavaPythonC++解题笔记】

本文仅为【2023传智杯-第二场】第六届传智杯程序设计挑战赛-题目解题分析详解的解题个人笔记,个人解题分析记录。 本文包含:第六届传智杯程序设计挑战赛题目、解题思路分析、解题代码、解题代码详解 文章目录 一.前言二.赛题题目D题题目-E题题目-F题题目-二.赛题题解D题题解-…

深入理解Sentinel系列-1.初识Sentinel

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理&#x1f525;如果感觉博主的文章还不错的话&#xff…

如何搭建自己的直播电商系统?

当下&#xff0c;传统的图文电商模式已经走向没落&#xff0c;视频电商备受追捧。抖音、快手、小红书、京东、淘宝、拼多多都在发力直播电商业务&#xff0c;尤其是以抖音为首的直播电商备受用户欢迎&#xff0c;它具有实时直播和强互动的特点&#xff0c;是传统电商所不具备的…

最长子串问题(LCS)--动态规划解法

题目描述&#xff1a; 如果Z既是X的子串&#xff0c;又是Y的子串&#xff0c;则称Z为X和Y的公共子串。 如果给定X、Y&#xff0c;求出最长Z及其长度。 注意&#xff1a;这里求的不是子序列&#xff0c;两者的意思并不相同。子串要求连续&#xff0c;子序列并不需要。 如果想…

simulinkveristandlabview联合仿真环境搭建

目录 开篇废话 软件版本 明确需求 软件安装 matlab2020a veristand2020 R4 VS2017 VS2010 软件安装验证 软件资源分享 开篇废话 推免之后接到的第一个让人难绷的活&#xff0c;网上开源的软件资料和成功的案例很少&#xff0c;查来查去就那么几篇&#xff0c;而且版本…

SpringData

1.为什么要学习SpringData&#xff1f; 是因为对数据存储的框架太多了&#xff0c;全部都要学习成本比较高&#xff0c;SpringData对这些数据存储层做了一个统一&#xff0c;学习成本大大降低。

SQL命令---修改字段的数据类型

介绍 使用sql语句修改字段的数据类型。 命令 alter table 表明 modify 字段名 数据类型;例子 有一张a表&#xff0c;表里有一个id字段&#xff0c;长度为11。使用命令将长度修改为12 下面使用命令进行修改&#xff1a; alter table a modify id int(12) NOT NULL;下面使修…

stm32使用多串口不输出无反应的问题(usart1、usart2)

在使用stm32c8t6单片机时&#xff0c;由于需要使用两个串口usart1 、usart2。usart1用作程序烧录、调试作用&#xff0c;串口2用于与其它模块进行通信。 使用串口1时&#xff0c;正常工作&#xff0c;使用串口2时&#xff0c;无反应。查阅了相关资料串口2在PA2\PA3 引脚上。RX…

[仅供学习,禁止用于违法]编写一个程序来手动设置Windows的全局代理开或关,实现对所有网络请求拦截和数据包捕获(抓包或VPN的应用)

文章目录 介绍一、实现原理二、通过注册表设置代理2.1 开启代理2.2 关闭代理2.3 添加代理地址2.4 删除代理设置信息 三、代码实战3.1 程序控制代理操作控制3.1.1 开启全局代理3.1.2 添加代理地址3.1.3 关闭代理开关3.1.4 删除代理信息 3.2 拦截所有请求 介绍 有一天突发奇想&am…

在git使用SSH密钥进行github身份认证学习笔记

1.生成ssh密钥对 官网文档&#xff1a;Https://docs.github.com/zh/authentication&#xff08;本节内容对应的官方文档&#xff0c;不清晰的地方可参考此内容&#xff09; 首先&#xff0c;启动我们的git bush&#xff08;在桌面右键&#xff0c;点击 Git Bush Here &#xf…

iOS_制作 cocopods库

文章目录 1.创建项目2.配置项目3.发布 1.创建项目 在 github 上创建仓库&#xff0c;克隆到本地&#xff1a; git clone https://github.com/mxh-mo/MOOXXX.git在项目目录下执行&#xff1a; pod lib create <库名称>进行一些配置的选择&#xff1a; # 希望在那个平台…

随机分词与tokenizer(BPE->BBPE->Wordpiece->Unigram->sentencepiece->bytepiece)

0 tokenizer综述 根据不同的切分粒度可以把tokenizer分为: 基于词的切分&#xff0c;基于字的切分和基于subword的切分。 基于subword的切分是目前的主流切分方式。subword的切分包括: BPE(/BBPE), WordPiece 和 Unigram三种分词模型。其中WordPiece可以认为是一种特殊的BPE。完…

求Sn=m+mm+mmm+...+mm..mmm(有n个m)的值

题目&#xff1a;求 的值 一、做这个题我们其实可以直接一个for求解&#xff1a; a,aa,aaa...我们很容易知道它们后一项与前一项的关系就是&#xff1b; public static void Sum(int m,int n){long sum 0L;long curAn 0;for (int i 0; i < n; i){curAn m 10* curAn;/…

Qexo博客后台管理部署

Qexo博客后台管理部署 个人主页 个人博客 参考文档 https://www.oplog.cn/qexo/本地部署 采用本地Docker部署管理本地Hexo 下载代码包 若无法下载使用科学工具下载到本地在上传到服务器 wget https://github.com/Qexo/Qexo/archive/refs/tags/3.0.1.zip# 解压 unzip Qexo…

联合体和枚举

联合体&#xff1a; 联合体是什么&#xff1f; 联合体也是一种自定义类型&#xff0c;这种类型定义的变量也包含一系列类型&#xff0c;特征是这些类型公用一块内存空间(所以叫联合体也叫公用体)可以理解为结构体公用一块内存。 //联合-联合体-共用体 //联合也是一种特殊的自…

TOMCAT9安装

1、官网下载 2、解压到任意盘符&#xff0c;注意路径不要有中文 3、环境变量 path 下 配置 %CATALINA_HOME%\bin 4、找到tomcat9/bin&#xff0c; 点击 start.bat启动 tomcat

目标检测、目标跟踪、重识别

文章目录 环境前言项目复现特征提取工程下载参考资料 环境 ubuntu 18.04 64位yolov5deepsortfastreid 前言 基于YOLOv5和DeepSort的目标跟踪 介绍过针对行人的检测与跟踪。本文介绍另一个项目&#xff0c;结合 FastReid 来实现行人的检测、跟踪和重识别。作者给出的2个主…

jsp 设备预约管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 设备预约管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0…

SQL命令---添加新字段

介绍 使用sql语句为表添加新字段。 命令 alter table 表名 add 新字段名 数据类型;例子 向a表中添加name字段&#xff0c;类型为varchar(255)。 alter table a add name varchar(255);下面是执行添加有的表结构&#xff1a;

springboot+jdbcTemplate+sqlite编程示例——以沪深300成分股数据处理为例

引言 我们在自己做一些小的项目或者小的数据处理分析的时候&#xff0c;很多时候是不需要用到mysql这样的大型数据库&#xff0c;并且也不需要用到maven这样很重的框架的&#xff0c;取而代之可以使用jdbcTemplatesqlite这样的组合。 本文就介绍一下使用springbootjdbcTempla…