Vitesse + vue3-pdfjs - issue with "SyntaxError: Cannot use import statement outside a module"

[spokospace]

Hello, I tried to solve this problem, however I can't deal with it.
I can't resolve the issue with the correct way to use Pdfvuer. I tried load PDF preview with Pdfvuer for Vue3 (https://github.com/arkokoley/pdfvuer/tree/vue3), and vue3-pdfjs (https://github.com/randolphtellis/vue3-pdfjs) but still have a fault, e.g.:

runtime-core.esm-bundler.js:6591 [Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

[Vue warn]: Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function. 
  at <VuePdf key=1 src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" page=1 >

I tried to put this as a function, and run after click on the button, load it with 'onMounted' etc.

Is it possible to load PDF in any way with vitesse js?

I tried with:

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

and like this:

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

template (like Basic Example in vue3-pdfjs | https://github.com/randolphtellis/vue3-pdfjs ):

<template>
  <VuePdf v-for="page in numOfPages" :key="page" :src="pdfSrc" :page="page" />
</template>

[gkweb]

@spokospace - Throw your code up on stackblitz https://stackblitz.com/github/antfu/vitesse otherwise it's hard to diagnose.

Vitesse is just a really nicely structured vanilla vite / vue. At a guess I'd say that this is a problem with your Vue implementation.

[spokospace]

@spokospace - Throw your code up on stackblitz https://stackblitz.com/github/antfu/vitesse otherwise it's hard to diagnose.

Vitesse is just a really nicely structured vanilla vite / vue. At a guess I'd say that this is a problem with your Vue implementation.

Thanks for this page, very useful. Okay, so looks like here it's working like a charm: https://stackblitz.com/edit/github-ijnjm5?file=src%2Fpages%2F[lang]%2Fdocs%2F[doc].vue

I tested it in the same structure like in my project ( /en/docs/1 ) so I don't know where is the issue when I run it on localhost...

[spokospace]

Ok, I had upgraded all dependencies and put pnpm install again. Now everything is working, so I believe there was something wrong with old dependencies. Problem solved!

Thx!

[spokospace]

Ok, so after the update it looks okay on develop, but when I tried to build I have this error:

C:\tests\catalog\node_modules\.pnpm\[email protected]\node_modules\vue3-pdfjs\esm\index.js:1
import { c as classofRaw, w as wellKnownSymbol, i as isObject, t as toObject, a as indexedObject, b as toLength, f as fails, _ as _export, d as documentCreateElement, e as createNonEnumerableProperty, g as global_1, o as objectPropertyIsEnumerable, h as 
toIndexedObject, j as objectKeys, k as descriptors, s as script, l as createLoadingTask } from './index-19f89c12.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Module.<anonymous> (C:\tests\catalog\.vite-ssg-temp\main.js:34:11)
 ERROR  Command failed with exit code 1.

is it any way to fix this issue with a change in config or something like that?

here is example: https://stackblitz.com/edit/github-ijnjm5 (just run pnpm build)

[spokospace]

I tried to import this using cjs instead of esm:

import { VuePdf, createLoadingTask } from 'vue3-pdfjs/cjs/index.js'

// Prop type definitions can also be imported
import { VuePdfPropsType } from 'vue3-pdfjs/components/vue-pdf/vue-pdf-props'

import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api'

but then I have this error:

[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

Do I need to create a separate module to fix this issue (like src/modules/pwa.ts)?
I've tried in many ways, but still to no avail

example: https://stackblitz.com/edit/github-ijnjm5?file=src%2Fpages%2F[lang]%2Fdocs%2F[doc].vue