mathewjordan
commented
8 months ago Hi @MWhiteFearless
The SSR build fail is due to Clover's inclusion of OpenSeadragon as a dependency. OpenSeadragon includes function calls on instantiation to the browser window -- which causes the crash.
To accommodate this, Clover must be imported in an alternative method. I'm not extremely familiar with Gatsby these days, however, in Next.js this is completed using the next/dynamic (https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#importing-client-components). See https://samvera-labs.github.io/clover-iiif/docs/viewer#nextjs.
In Gatsby, this could possibly be completed with the following pattern:
import React, { Suspense, lazy, useEffect, useState } from "react";
const CloverViewer = lazy(() =>
import("@samvera/clover-iiif").then((Clover) => Clover.Viewer)
);
const DynamicCloverViewer = () => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
// This effect will run only once after the initial render, hence setting isClient to true
setIsClient(true);
}, []);
return (
<div>
{isClient && (
<Suspense fallback={<div>Loading...</div>}>
<CloverViewer iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/76d0aebe-fc8a-4c6f-91dd-31026e67301e?as=iiif" />
</Suspense>
)}
</div>
);
};
export default DynamicCloverViewer;
MWhiteFearless
Hello,
First, thanks for building out such a great viewer! I'm trying to use it on a project, and it runs fine locally but when we go to deploy with gatsby build, we get several SSR related errors and the build fails
and many more similar errors. I've tried several webpack workarounds, installing past versions of Clover, upgrading React, to no avail. I'm thinking that there might be incompatible node versions, but I've had a hard time finding what's required for Clover.
My project:
Do you know if my node version is incompatible, or maybe of another way to resolve this error? Thanks for the help!