CODEWITHSUNDEEP
typescriptnext.jsopenseadragonannotorious
FrustratedCoder
FrustratedCoder

Reputation: 11

Cannot find name 'Annotorious'

I'm currently using NextJS with typescript I've inserted the script:

<Head><link href="/css/bindingbox.min.css" rel="stylesheet"></link><script async type="text/javascript" src="/scripts/annotorious.min.js"></script></Head>

And when I tried to call:

 useEffect(()=>{
    setTimeout(() => {
        var anno = Annotorious.init({
            image: "raven_cafe",
            readOnly: true,
          });
          anno.loadAnnotations('/scripts/annotations.w3c.json');
          //disable displaying the binding box when selected on the image
          anno.on('selectAnnotation', function(data) {
            let element = document.querySelector(`g[data-id="`+data.id+`"]`);
            element.classList.remove('selected');
          });
    }, 100);
  },[]);

I'm receiving a typescript error saying: "Cannot find name 'Annotorious'" How to remove that error?

Upvotes: 1

Views: 726

Answers (1)

aboutgeo
aboutgeo

Reputation: 302

I don't have a lot of experience with NextJS, but won't that render static pages? Therefore my guess is that it has to do with the way NextJS transforms the output during the rendering phase.

If you import via the tag, Annotorious is actually a global variable: window.Annotorious, so you probably need to take some extra precautions to make this work in NextJS.

This approach might help: https://medium.com/swlh/how-to-use-a-library-in-next-js-that-wants-window-whatever-96c738263d67

The crucial bit seems to be the dynamic import feature that makes sure that the code using Annotorious only runs in the browser, and isn't touched during SSR.

Upvotes: 0

Related Questions