Alcumus / react-doc-viewer

Apache License 2.0
207 stars 101 forks source link

window is not defined in SSR #124

Open venkateswaran-b opened 1 year ago

venkateswaran-b commented 1 year ago

While using react-doc-viewer in frameworks with SSR like Next.js or Gatsby there is an error in the line while the build phase

window.requestAnimationFrame(resolve);

ReferenceError: window is not defined

Error occurs in node_modules/pdfjs-dist/lib/web/ui_utils.js:564:3 version: 0.1.5 Can someone help in this?

kzazarashvili commented 1 year ago

having same issue in Gatsby app

dev-smart-ui commented 1 year ago

Hey! Try just import component with DocViewer as React Lazy component.

const DocumentViewer = React.lazy(() => import("../DocumentViewer/index"))

and render it

<Suspense fallback={<Loader />}>
                <DocumentViewer
                  key={fileUrl}
                  fileUrl={fileUrl}
                  filename={fileName}
                />
              </Suspense>
syafiqfaiz-bina commented 2 months ago

Hey! Try just import component with DocViewer as React Lazy component.

const DocumentViewer = React.lazy(() => import("../DocumentViewer/index"))

and render it

<Suspense fallback={<Loader />}>
                <DocumentViewer
                  key={fileUrl}
                  fileUrl={fileUrl}
                  filename={fileName}
                />
              </Suspense>

This works, but how do I import the the renderer as well?

for example this what we import import DocViewer, { DocViewerRenderers, IDocument } from 'react-doc-viewer';