javascript - Next.js Webviewer 在构建时参考错误,未定义窗口
问题描述
我正在创建一个网站,我的页面中有一个动态导入的 pdf 查看器。代码在本地运行没有错误,但在“npm run build”命令中我发现以下错误:
> Build error occurred
ReferenceError: window is not defined
at Object.<anonymous> (C:\Users\GustavoMorilla\MyProfile\node_modules\@pdftron\webviewer\webviewer.min.js:1:224)
at Object.g7Pv (C:\Users\Gustavo Morilla\MyProfile\.next\server\pages\resume\viewer.js:121:18)
at __webpack_require__ (C:\Users\Gustavo Morilla\MyProfile\.next\server\pages\resume\viewer.js:23:31)
at Module.vRHl (C:\Users\Gustavo Morilla\MyProfile\.next\server\pages\resume\viewer.js:134:76) {
type: 'ReferenceError'
info - Collecting page data .npm ERR! code ELIFECYCLE }
查看器.js 代码:
import React, { useRef, useEffect } from "react";
import WebViewer from "@pdftron/webviewer";
const Viewer = () => {
const viewer = useRef(null);
useEffect(() => {
WebViewer(
{
path: '/lib',
initialDoc: "/pdf/GustavoMorilla.pdf",
},
viewer.current
).then(function (instance) {
instance.setTheme("dark");
});
}, []);
return (
<div>
<div className="Viewer">
<div className="header flex justify-between">
<a>Resume</a>
<a className="text-sm">You can download the file on "Settings" button</a>
</div>
<div className="Webviewer" ref={viewer}></div>
</div>
</div>
);
};
export default Viewer;
resume.js 代码:
import SiteLayout from "../../components/SiteLayout";
import React from "react";
import dynamic from "next/dynamic";
const Viewer = dynamic(() => import("../resume/viewer.js"), { ssr: false });
export default function Resume({ resume }) {
return (
<div>
<SiteLayout>
<div className="main w-screen">
<Viewer />
</div>
</SiteLayout>
</div>
);
}
应该是与 SSR 或生命周期有关的东西……我不知道。
解决方案
window
服务端不存在对象,使用条件渲染解决问题。
import SiteLayout from '../../components/SiteLayout'
import React from 'react'
import dynamic from 'next/dynamic'
const Viewer = dynamic(() => import('../resume/viewer.js'), { ssr: false })
export default function Resume({ resume }) {
return window ? (
<div>
<SiteLayout>
<div className="main w-screen">
<Viewer />
</div>
</SiteLayout>
</div>
) : null
}
推荐阅读
- highcharts - Highcharts如何在图例中显示数据类的总数
- sharepoint - 是否有采取 AAD 身份验证和进行 SharePoint Online 身份验证的机制
- javascript - 在反应中一次导入多个图像文件的任何简单方法
- android - Play 商店中的 Android 应用状态显示预注册而不是安装
- filter - 从信号中滤除低幅度噪声
- python - 为什么我在 pip install uwsgi 后找不到 python 模块 uwsgi?
- python - 将 Dataframe 中的“日期”和“以微秒为单位的时间”连接到日期时间格式
- c++ - 如何在 C++ 中连接多个 C 风格的字符串?
- flutter - Stack 内的 ListView.builder 返回 Null Check 错误用于空值
- c++ - 什么是 C++ 中的数据覆盖?