gtm-nayan / svelte-pdfjs

https://gtm-nayan.github.io/svelte-pdfjs
MIT License
31 stars 8 forks source link

getDocument is undefined; unexpected keyword export #18

Closed OJFord closed 6 months ago

OJFord commented 7 months ago

pdfjs-dist v4 seems to need .mjs rather than .js in set_pdfjs_context, but with that done, or in v3, I get the error:

Unhandled Promise Rejection: TypeError: getDocument is not a function. (In 'getDocument({ url: file, worker, ...loadOptions })', 'getDocument' is undefined) (anonymous function) — Document.svelte:26

I did have this working, but I'm struggling to find what's caused this regression - it doesn't seem to be due to vite or pdfjs-dist upgrade.

gtm-nayan commented 6 months ago

I just tried to upgrade to v4 on that other branch, seems like that requires a quite a bit more configuration on the user's part.

I'll keep this package with only a v3 peer dep for now, i.e. v4 will be technically unsupported, but if you want to use v4 see if the following vite config helps.

    optimizeDeps: {
        exclude: ['pdfjs-dist'], // prevent esbuild from trying to resolve .node binding in canvas during dev
    },
    build: {
        rollupOptions: {
            external: ['canvas'], // prevent rollup from trying to bundle a node dependency
        },
        target: 'esnext', // esbuild complains about top level await
    },
OJFord commented 6 months ago

The latest v4 fixes a CVE that affects my use, but there is a workaround for earlier versions; I'd just like to get something working again for now.

Do you have any idea why (in v3 even) getDocument is not defined? I can't see anything obvious comparing to the demo, and it was working, I don't think I've changed anything other than package upgrades, but I can't now find a downgrade that fixes it either.

As I mentioned in https://github.com/gtm-nayan/svelte-pdfjs/pull/16#issuecomment-2105981249, possibly the optimizeDeps.exclude is necessary for v3 as well? Because with that instead of 'getDocument' is undefined I get:

[Error] [HMR][Svelte] – "Unrecoverable HMR error in <MyComponentUsingSveltePdfjs>: next update will trigger a full reload" logError (proxy.js:15) [Error] Unhandled Promise Rejection: Error: this={...} of <svelte:component> should specify a Svelte component. flush (chunk-KQS2SRXE.js:1318)

That's with svelte-pdfjs@0.8.0 & pdfjs-dist@3.11.174, and component reduced to:

<script>
  import { Document, Page } from "svelte-pdfjs";
  import { set_pdfjs_context } from "svelte-pdfjs/vite";

  export let b64Data;

  set_pdfjs_context();

  $: docUrl = `data:application/pdf;charset=US-ASCII;base64,${b64Data}`;
</script>

<Document file={docUrl}>
  <div>
    <Page />
  </div>
</Document>

Thanks.

gtm-nayan commented 6 months ago

As I mentioned in https://github.com/gtm-nayan/svelte-pdfjs/pull/16#issuecomment-2105981249, possibly the optimizeDeps.exclude is necessary for v3 as well?

Shouldn't be, at least in my experience. I haven't been able to reproduce the getDocument is not defined error, either with v4 or v3.

I released v0.8.0 with the changes from #16, see if that helps.

Here's a demo project using v4 along with the necessary changes to make it work, https://github.com/gtm-nayan/svelte-pdfjs-demo, I missed a separate commit for the pnpm patch so check that as well, the other changes are separate commits.

OJFord commented 6 months ago

Thanks, the demo works, struggling to determine the significant difference though.

That was using v0.8.0.

If I look at the Document.svelte source behind the error, it's trying to load:

const { getDocument } = await import("/node_modules/pdfjs-dist/build/pdf.js?v=8dc9d016");`

but it seems to actually be at /node_modules/.vite/deps/pdf-ZV4JKO62.js?v=8dc9d016, could that be it, or is that correct (and that indirection is handled by vite somehow)?

(I'm using vite v5 fwiw, which is ahead of this repo but the same as the linked demo.)

gtm-nayan commented 6 months ago

node_modules/.vite/deps/pdf-ZV4JKO62.js?v=8dc9d016

afaik once you add pdfjs-dist to optimizeDeps.exclude it shouldn't be there. Maybe try running dev with the --force flag once.

But that path transformation is handled by vite, I just give it pdfjs-dist as seen in Document.svelte and vite transforms it to the correct address.

Also are you on the latest version of Vite 5? There were some bugs around 5.1.x that were fixed later.

OJFord commented 6 months ago

afaik once you add pdfjs-dist to optimizeDeps.exclude it shouldn't be there.

Well I'd removed that exclusion since you'd said it shouldn't be necessary with v3, just to try to match expected config as much as possible.

Also are you on the latest version of Vite 5? There were some bugs around 5.1.x that were fixed later.

I am, v5.2.11.

I've just found though that it does work in my actual builds (including debug builds), just not in dev; so whatever's going on it's presumably my doing, not a problem here.

Thanks for the help.