1

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?

FrustratedCoder
  • 11
  • 1
  • 1
    Install it using your package manager, then refer the part of [docs](https://recogito.github.io/annotorious/api-docs/) that tells you how to do things "With npm". Still TS will throw errors as the packages (`@recogito/annotorious`, `@recogito/annotorious-openseadragon`) have no associated type definitions, nor they are available on DefinitelyTyped. – brc-dd Aug 31 '21 at 08:28

1 Answers1

0

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.

Rainer Simon
  • 56
  • 3