解决服务端渲染程序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,一经查实,立即删除!

相关文章

bat脚本之while

在批处理&#xff08;BAT&#xff09;脚本中&#xff0c;while循环是一种常用的控制流结构&#xff0c;用于在满足特定条件的情况下重复执行一段代码。 while循环的基本语法如下&#xff1a; while [ condition ] do command1 command2 ... commandN done这里的 cond…

【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…

待做-待补充-每个节点做事,时间,以及与角度的关系

文章目录 待定内容红黑树应用场景限制什么是二叉树遍历递归遍历1.前序遍历 进入节点时2.中序遍历 遍历完左子树回到节点。此操作需要等到所有左树节点做完后才会做3.后序遍历 遍历完左右子树回到节点。左右子树的所有节点都做完操作后&#xff0c;回到当前节点才会做此操作 …

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

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

<HarmonyOS第一课>保存应用数据【课后考核】

【习题】保存应用数据 判断题 首选项是关系型数据库。 错误(False) 应用中涉及到Student信息&#xff0c;如包含姓名&#xff0c;性别&#xff0c;年龄&#xff0c;身高等信息可以用首选项来存储。 错误(False) 同一应用或进程中每个文件仅存在一个Preferences实例。 正确(T…

最长子串问题(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。完…

实时最优控制(Real-Time Optimal Control)工具

系列文章目录 前言 许多现代控制方法&#xff0c;如模型预测控制&#xff08;model-predictive control&#xff09;&#xff0c;在很大程度上依赖于实时解决优化问题。特别是&#xff0c;高效解决优化控制问题的能力使复杂机器人系统在实现高动态行为&#xff08;highly dyna…

求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…

C++中的前缀和

C中的前缀和&#xff08;Prefix Sum&#xff09;是一种优化算法&#xff0c;用于计算原数组中每个元素前缀和&#xff08;前面所有元素的累加和&#xff09;&#xff0c;可以在O(n)时间内实现。 #include<iostream> using namespace std;const int MAXN 100010;int Pre…

Linux comm命令教程:如何比较两个文件的内容(附案例详解和注意事项)

Linux comm命令介绍 comm命令是Linux系统中的一个命令&#xff0c;用于比较两个已排序的文件或流。默认情况下&#xff0c;comm将始终显示三列。第一列显示只在第一个文件中的非匹配项&#xff0c;第二列显示只在第二个文件中的非匹配项&#xff0c;第三列显示两个文件中的匹配…