Missing declarations to index-19f89c12.js and SyntaxError: Cannot use import statement outside a module about vue3-pdfjs HOT 4 OPEN

Hi @spokospace , I just tried on a fresh installation of Vue and there doesn't seem to be any problem with the builds. If you're using a modern bundler you can import the component like import { VuePdf, createLoadingTask } from 'vue3-pdfjs';

If you still wish to use the esm folder you'll need to add a declaration to your shims file like declare module 'vue3-pdfjs/esm';

from vue3-pdfjs.

Hello. Okay, yes, thanks! I configured it and run on development mode correctly, but still have issue with production.
I'm trying to connect this with vite-ssg (inside vitesse starter template).

I tried with:
import { VuePdf, createLoadingTask } from 'vue3-pdfjs/cjs/index.js' but then I have error 'window is not defined':

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:7) UnhandledPromiseRejectionWarning: ReferenceError: window is not defined
    at eval (/home/projects/github-ijnjm5/node_modules/pdfjs-dist/legacy/web/pdf_viewer.js:2141:3)
    at new Promise (<anonymous>)
    at Array.Object.defineProperty.value (/home/projects/github-ijnjm5/node_modules/pdfjs-dist/legacy/web/pdf_viewer.js:2140:24)

or:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
/www/catalog/node_modules/.pnpm/[email protected]/node_modules/pdfjs-dist/legacy/web/pdf_viewer.js:2224
  window.requestAnimationFrame(resolve);
  ^

ReferenceError: window is not defined

I have the rest of the site based on vitesse, so I really care not to change that. If I manage to configure it with pdf, I will let you know.

from vue3-pdfjs.

I tried it with async load and checking if window is not undefined:

const pdfSrc = ref<VuePdfPropsType['src']>(props.pdfPath)
const numOfPages = ref(0)

onMounted(async() => {

  if (typeof window !== 'undefined') {

    const vue3Pdfjs = await import('vue3-pdfjs')
    const VuePdf = vue3Pdfjs.VuePdf
    const createLoadingTask = vue3Pdfjs.createLoadingTask

    const loadingTask = createLoadingTask(pdfSrc.value)
    loadingTask.promise.then((pdf: PDFDocumentProxy) => {
      numOfPages.value = pdf.numPages
    })

  }
})

and also with globally import:

import type { UserModule } from '~/types'
export const install: UserModule = ({ isClient, app }) => {
  if (isClient)
    import('vue3-pdfjs').then(({ VuePdf, createLoadingTask }) => {
        app.use(VuePdf)
    }).catch(e => {
      console.error('vue3-pdfjs error', e)
    })
}

but then I have error:
index-19f89c12.js?v=c8422c1c:3 Uncaught (in promise) SyntaxError: The requested module '/node_modules/.pnpm/[email protected]/node_modules/pdfjs-dist/legacy/build/pdf.worker.entry.js?v=c8422c1c' does not provide an export named 'default'

There is any way to fix this issue with pdf worker?

or:

       SyntaxError: Invalid or unexpected token
       vue3-pdfjs error SyntaxError: Invalid or unexpected token

Ok, last one error is because no CORS settings, after put correct CORS there is no unexpected token and it's working on production with vite-ssg but not always.

Sometimes, before refresh in Firefox I have:
vue3-pdfjs error SyntaxError: identifier starts immediately after numeric literal

from vue3-pdfjs.

Hi @spokospace , I just tried on a fresh installation of Vue and there doesn't seem to be any problem with the builds. If you're using a modern bundler you can import the component like import { VuePdf, createLoadingTask } from 'vue3-pdfjs';

If you still wish to use the esm folder you'll need to add a declaration to your shims file like declare module 'vue3-pdfjs/esm';

run for vite, have erro: Cannot read properties of undefined (reading 'DISABLE')

from vue3-pdfjs.