在Svelte中加载pdfAnnotate时如何解决Circular dependencies循环依赖问题

这个报错不是操作失误导致的，是annotpdf包内部的object-util.js和array-util.js两个模块存在循环引用，Svelte默认的Rollup打包工具检测到该问题后抛出警告，阻塞了页面渲染。

可以按以下优先级尝试解决：

• 过滤Rollup警告
  打开项目根目录的rollup.config.js，在导出的配置里新增onwarn规则：

export default {
  // 原有配置（input、output、plugins等）保持不变
  onwarn: (warning, warn) => {
    if (warning.code === 'CIRCULAR_DEPENDENCY' && warning.message.includes('annotpdf')) return
    warn(warning)
  }
}

修改后重启npm run dev，警告会被跳过，页面即可正常加载。

• 异步导入依赖
  如果上一个方案执行后页面仍然空白，调整App.svelte的导入逻辑，改成组件挂载后异步加载annotpdf：

<script>
  import PdfViewer from 'svelte-pdf';
  import { onMount } from 'svelte';

  let AnnotationFactory;

  onMount(async () => {
    const annotModule = await import('annotpdf');
    AnnotationFactory = annotModule.default;
    // 注解相关的业务逻辑写在这里即可
  });
</script>

<main>
  <PdfViewer url='./example.pdf' />
</main>

• 升级依赖版本
  annotpdf 1.0.21及以上版本已经修复了内部循环依赖问题，直接升级依赖也可以解决：

npm install annotpdf@latest

升级完成后重启开发服务即可。

内容的提问来源于stack exchange，提问作者Lars