解決服務端渲染程序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.pswp.cn/news/210979.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/210979.shtml
英文地址,請注明出處:http://en.pswp.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;第三列顯示兩個文件中的匹配…