does not provide an export named 'DefaultAnnotationLayerFactory'

[Lysom]

when I use pdfVuer, there is an issue 'SyntaxError: The requested module '/node_modules/[email protected]@pdfjs-dist/web/pdf_viewer.js?v=0ddebc6b' does not provide an export named 'DefaultAnnotationLayerFactory'

[arkokoley]

Which version of pdfvuer are you using?

[t-sinbo]

latest and vue3

[t-sinbo]

latest and vue3

sorry, the next

[ddo]

any update?

[lffv]

Same here using @next and vue 3.0.5.

any updates?

[t-sinbo]

The question maybe cased by vite.

[Songkeys]

Any updates? I can't find any pdf viewer library working with vite+vue3...

[phcreery]

Same here

[phcreery]

I found https://github.com/hrynko/vue-pdf-embed that works for my case.

[PetalsOnaWet]

Any updates?

[adesr]

hello, any update on this issue?

[zenflow]

So this package doesn't work with Vite

This is the upstream issue in pdfjs: https://github.com/mozilla/pdf.js/issues/10317

https://github.com/hrynko/vue-pdf-embed looks like a good alternative that doesn't have this issue, but lacks the zoom/scale feature.

I think the solution vue-pdf-embed uses could be applied here: make pdfjs built-in so that it's not installed & imported as another dependency in projects that use pdfvuer.

[akbarism]

I'm using nuxt 3, and vue-pdf-embed doesn't work on nuxt 3, is there any alternative?

[zenflow]

God damn it @akbarism maybe try reading what's been posted already, before adding noise to the issue. The answer to your question is already posted.

[LorDeCry]

Hello guys. I had same issue, and was looking for solution... I ended up using different library, which is still based on the pdf.js but has a little different setup, using composable function. I figured out how to solve the issue. It works, looks a little bit hacky tho...

So I used https://github.com/TaTo30/VuePDF as an alternative, but the trick was in defining following plugin which is loaded only on client, within which pdf.js loaded (in this particular library its within usePDF)

import { VuePDF, usePDF } from "@tato30/vue-pdf";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("VuePDF", VuePDF);

  return {
    provide: {
      usePDF,
    },
  };
});

So it feels weird to provide composable within plugin, but at the end composable is just a function. Here is an example component how to use it - in my library I first open my modal window with loading notice, and the URL of PDF is fetched dynamically, so I had to listen to URL changes.

<template>
  <div class="text-2xl min-h-[80vh] flex items-center justify-center text-center" v-if="pages === 0">
    Loading PDF Document...
  </div>
  <div class="space-y-6" v-else>
    <VuePDF
      :pdf="pdf"
      :page="page"
      :scale="scale"
      v-for="page in pages"
      :key="page"
      class="justify-center"
      :text-layer="true"
    />
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    url?: string;
    scale?: number;
  }>(),
  {}
);

const { $usePDF } = useNuxtApp();

let pdf = ref();
let pages = ref(0);
let info = ref();

watch(
  () => props.url,
  () => {
    if (!props.url) {
      return;
    }
    const { pdf: _pdf, pages: _pages, info: _info } = $usePDF(props.url, {});
    pdf = _pdf;
    pages = _pages;
    info = _info;
  },
  { immediate: true }
);
</script>

Maybe you could figure out how to setup it with pdfvuer