Gatsby Build Failures about clover-iiif HOT 10 CLOSED

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;

from clover-iiif.

@MWhiteFearless Here's a codesandbox as an example if helpful.
https://codesandbox.io/p/sandbox/clover-lazy-suspense-8vgwg4

Let me know if this works for you in Gatsby!

from clover-iiif.

Thanks for the suggestion! Unfortunately I still get the same build errors with those changes

from clover-iiif.

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?

from clover-iiif.

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 :)

from clover-iiif.

@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.
https://codesandbox.io/p/devbox/gatsby-clover-98c3lw?file=%252Fsrc%252Fcomponents%252Fviewer.js

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

from clover-iiif.

@MWhiteFearless I grossly overlooked your React version. Sadly, Clover has issues with older versions of React. Is it possible to update React 18 @latest for your project? This in conjunction with my previous comment might send it in the right direction.

from clover-iiif.

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

from clover-iiif.

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!

from clover-iiif.

@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

from clover-iiif.