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 }

发生生成错误 ReferenceError:未定义窗口 反对。（C:\Users\GustavoMorilla\MyProfile\node\u modules\@pdftron\webviewer\webviewer.min.js:1:224） 在Object.g7Pv（C:\Users\Gustavo Morilla\MyProfile\.next\server\pages\resume\viewer.js:121:18） 在网页上（C:\Users\Gustavo Morilla\MyProfile\.next\server\pages\resume\viewer.js:23:31） 在Module.vRHl（C:\Users\Gustavo Morilla\MyProfile\.next\server\pages\resume\viewer.js:134:76）{ 类型：“ReferenceError” 信息-正在收集页面数据。npm ERR！code ELIFECYCLE} viewer.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;

import React，{useRef，useffect}来自“React”；
从“@pdftron/WebViewer”导入WebViewer；
常量查看器=（）=>{
const viewer=useRef（null）；
useffect（（）=>{
网络浏览器(
{
路径：'/lib'，
initialDoc:“/pdf/GustavoMorilla.pdf”，
},
查看器.current
).then（函数（实例）{
setTheme（“黑暗”）；
});
}, []);
返回(
简历
您可以通过“设置”按钮下载文件
);
};
导出默认查看器；

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>
  );
}

从“../../components/SiteLayout”导入SiteLayout；
从“React”导入React；
从“下一个/动态”导入动态；
const Viewer=dynamic（（）=>import（“../resume/Viewer.js”），{ssr:false}）；
导出默认函数Resume（{Resume}）{
返回(
);
}

---

应该与SSR或生命周期有关。。。我不知道。

窗口

对象在服务器端不存在，请使用条件渲染解决此问题

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
}

从“../../components/SiteLayout”导入SiteLayout
从“React”导入React
从“下一个/动态”导入动态
const Viewer=dynamic（（）=>import（'../resume/Viewer.js'），{ssr:false}）
导出默认函数Resume（{Resume}）{
回程窗口(
)：null
}

听起来您有一个服务器端（同构）（SSR）实现-当此代码在服务器上运行时，它没有窗口对象-您需要阻止代码在服务器上运行此部分-我认为

React.useffect

在服务器上运行，如果我的内存可用，我们没有窗口的定义。。当我尝试这段代码时，我们得到了引用错误。