0

我目前正在使用带有打字稿的 NextJS 我已经插入了脚本：

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

当我试图打电话时：

 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);
  },[]);

我收到一个打字稿错误说：“找不到名称'Annotorious'”如何删除该错误？

4

1 回答 1

0

我对 NextJS 没有太多经验，但不会渲染静态页面吗？因此我的猜测是它与 NextJS 在渲染阶段转换输出的方式有关。

如果你通过标签导入，Annotorious实际上是一个全局变量：window.Annotorious，所以你可能需要采取一些额外的预防措施才能在 NextJS 中使用它。

这种方法可能会有所帮助： https ://medium.com/swlh/how-to-use-a-library-in-next-js-that-wants-window-whatever-96c738263d67

关键的一点似乎是动态导入功能，它确保使用 Annotorious 的代码仅在浏览器中运行，并且在 SSR 期间不会被触及。

于 2021-09-25T09:26:19.163 回答