Next.js Webviewer 在构建时参考错误，未定义窗口

Question

我正在创建一个网站，其中我的页面中有一个动态导入的 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 }

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;

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 或生命周期相关的东西……我不知道。

Answer 1

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
}