React and OpenSeadragon draw polygons on image

Question

I'm writing my web-app with create-react-app and I want to create a viewer to render an image and create multiple editable polygons on it.

OpenSeadragon is perfect for this job, in particular there is a useful plugin OpenseadragonFabricjsOverlay that use fabric.js.

So after I installed the following libraries:

"@types/fabric": "^4.5.12",
"@types/openseadragon": "^3.0.4",
"fabric": "^5.2.4",
"openseadragon": "^3.1.0",
"openseadragon-fabricjs-overlay": "github:altert/OpenseadragonFabricjsOverlay"

and created Viewer component

import React, { useEffect } from 'react';
import OpenSeadragon from 'openseadragon';
import 'openseadragon-fabricjs-overlay';
import { fabric } from 'fabric';

const Viewer = () => {
  useEffect(() => {
    const viewer = OpenSeadragon({
      id: 'osd-viewer',
      tileSources: {
        type: 'image',
        url: 'path/to/image/jpg'
      }
    });

    // Initialize overlay
    const options = {
        scale: 1000
    }
    const overlay = viewer.fabricjsOverlay(options);

    return () => {
      viewer.destroy();
    };
  });

  return (
    <div id="osd-viewer" style={{ height: '100%', width: '100%' }}></div>
  );
};

export default Viewer;

I get that error: [openseadragon-canvas-overlay] requires OpenSeadragon

This occurs because OpenSeaDragon has not yet loaded.

How can I include the openseadragon-fabricjs-overlay.js file after OpenSeadragon? Do you have advices?

UPDATE: Follow this issue to fix it

Answer 1

The fabric overlay is assuming that OpenSeadragon will be found on the global window object. You might be able to fix it by adding this between the OSD and plugin imports:

window.OpenSeadragon = OpenSeadragon;