Versions beginning with 4.0.24 not working with Next.js

[firatciftci]

UV version:

 universalviewer@<4.0.25>

I'm submitting a:

• bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below
• feature request => please use the user stories repo
• support request => Please do not submit support requests here, use stackoverflow

Current behavior:
I am running a Next.js web application and I am using UniversalViewer through the Next.js example posted in the documentation, exactly as-is. The only difference with the example code is the version of the package; up until version 4.0.24 (not inclusive), the code runs perfectly fine, but starting with version 4.0.24 (which includes the current up-to-date version, 4.0.25), whenever I try to use the component in my code, I get the following error:

./node_modules/universalviewer/dist/esm/chunk-4BC26SXO.js:7:12839
Module not found: Can't resolve '../../extensions'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/universalviewer/dist/esm/Extension-WVQ75NPV.js
./node_modules/universalviewer/dist/esm/IIIFContentHandler-5PKM52HV.js
./node_modules/universalviewer/dist/esm/index.js
./components/UniversalViewer.js
./components/UniversalViewerNoSSR.js
./pages/item/[id].js

This appears as if imports for dependencies or local files in the most recent versions became incompatible with how Next.js operates, but this is just an educated guess on my part.

Expected behavior:
The viewer displays normally, without any issues.

Steps to reproduce:

1. Download the most up-to-date version (currently 4.0.25) of UniversalViewer through npm/yarn/bun.
2. Copy and paste the UniversalViewer example code for Next.js from the official documentation.
3. Import the UniversalViewer component anywhere in your code.

Related code:

import { useEffect, useMemo, useRef, memo } from 'react';
import { IIIFEvents as BaseEvents } from 'universalviewer';

import { useEvent, useUniversalViewer } from '@/lib/useUniversalViewer';

import '@/node_modules/universalviewer/dist/esm/index.css';

const UniversalViewer = memo(({ manifestId, canvasIndex, onChangeCanvas }) => {
  const ref = useRef(null);
  const lastIndex = useRef();
  const options = useMemo(
    () => ({
      manifest:
        'https://api.dc.library.northwestern.edu/api/v2/works/8a833741-74a8-40dc-bd1d-c416a3b1bb38?as=iiif',
      canvasIndex: canvasIndex || 0,
      embedded: true,
    }),
    [],
  );
  const uv = useUniversalViewer(ref, options);

  useEffect(() => {
    if (uv && (canvasIndex || canvasIndex === 0)) {
      if (lastIndex.current !== canvasIndex) {
        uv._assignedContentHandler?.publish(
          BaseEvents.CANVAS_INDEX_CHANGE,
          canvasIndex,
        );
        lastIndex.current = canvasIndex;
      }
    }
  }, [canvasIndex, uv]);

  useEvent(uv, BaseEvents.CANVAS_INDEX_CHANGE, (i) => {
    if (onChangeCanvas) {
      if (lastIndex.current !== i) {
        const canvas = uv?.extension?.helper.getCanvasByIndex(i);
        if (canvas) {
          lastIndex.current = i;
          onChangeCanvas(manifestId, canvas.id);
        }
      }
    }
  });

  return (
    <>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/esm/index.css"
      />
      <div className="uv" style={{ height: 500 }} ref={ref} />
    </>
  );
});

UniversalViewer.displayName = 'UniversalViewer';

export default UniversalViewer;

// I then import the component using next/dynamic in a different part of my code.

Other information:
N/A

[demiankatz]

@firatciftci, unfortunately I don't have much experience with Next.js, so I don't have an immediate theory about what would have caused this... but I wonder if it's worth noting here exactly which version of Next.js you are using, in case that is also a factor in some way.

[firatciftci]

@demiankatz Fair point; I am using Next.js version 14.0.4.

[demiankatz]

@firatciftci, out of curiosity, I just looked at the diffs to see exactly what changed in release 4.0.24, and the answer is not very much:

v4.0.23...v4.0.24

The only change is a bump in the version of the iiif-av-component, which doesn't seem like it ought to be the sort of thing to break the entire application.

It might be interesting to see what would happen if you checked out v4.0.25 and downgraded the iiif-av-component. Would it start working again? If so, we'd at least know who the culprit is; if not, then there must be some other variable I'm overlooking....

[firatciftci]

@demiankatz v4.0.23 is actually not published on npm, so I could not test that one out. I think focusing on the difference between v4.0.22 and v4.0.23/24 is more useful here (v4.0.22 works without any issues):

v4.0.22...v4.0.24

[demiankatz]

I don't see anything that seems like an obvious breaking change here. Perhaps the most likely suspect is the work from #906 since that changes the way some files are organized and loaded (and accounts for a larger number of changed files than most of the other commits combined), but I don't see an obvious red flag in the way it is done.