Gatsby Build Failures #175
Comments
|
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 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 Here's a codesandbox as an example if helpful. Let me know if this works for you in Gatsby! |
|
Thanks for the suggestion! Unfortunately I still get the same build errors with those changes |
Hmmm... Darn. Do you have a public repo of your codebase? |
|
Unfortunately our project is private, though we have been able to deploy Mirador successfully in the project (which also uses openseadragon) so I wonder if the issue might be something else? Mirador doesn't actually work for our use case which is why I'm still trying to get Clover to deploy :) |
|
@MWhiteFearless If you are restricting yourself to just the Viewer component, can you try this revised component where the Viewer is the default export? I'm able to get this to build in this Gatsby instance. Note the difference on the lazy import const CloverViewer = lazy(() => import("@samvera/clover-iiif"))Full block: import React, { Suspense, lazy, useEffect, useState } from "react"
const CloverViewer = lazy(() => import("@samvera/clover-iiif"))
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 I grossly overlooked your React version. Sadly, Clover has issues with older versions of React. Is it possible to update React 18 |
|
I tried the react 18 and lazy/Suspense suggestions together and still get the same error, next maybe I'll try this workaround https://www.gatsbyjs.com/docs/using-client-side-only-packages/#workaround-4-load-client-side-dependent-components-with-loadable-components. Interesting that you can get it to build without issue, maybe this is an issue related to Gatsby 3 |
|
I determined that the errors I was running in to were actually related to @iiif/vault and incompatible dependency versions there, not openseadragon. I've moved forward with implementing openseadragon on its own and have it working :) thanks for helping troubleshoot! The lazy loading suggestion was helpful for getting openseadragon working. I think to get clover working on my project we would have to upgrade gatsby and node, which unfortunately isn't an option for us. We can probably close this issue! |
|
@MWhiteFearless I'm going to close this but I also want to make you aware of a new Image component that is essentially a styled OpenSeadragon wrapper. https://samvera-labs.github.io/clover-iiif/docs/image |
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!
The text was updated successfully, but these errors were encountered: