Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use it in sveltekit project? #68

Open
CHETANECINFOSOLUTIONS opened this issue Jan 25, 2024 · 8 comments
Open

How to use it in sveltekit project? #68

CHETANECINFOSOLUTIONS opened this issue Jan 25, 2024 · 8 comments

Comments

@CHETANECINFOSOLUTIONS
Copy link

CHETANECINFOSOLUTIONS commented Jan 25, 2024

My code

<script>
import { onMount } from 'svelte';
let PdfViewer;
onMount(async () => {
		const module = await import('svelte-pdf');
		PdfViewer = module.default;
	});
	
</script>
<svelte:component
	this={PdfViewer}
	url="https://raw.githubusercontent.com/vinodnimbalkar/svelte-pdf/369db2f9edbf5ab8c87184193e1404340729bb3a/public/sample.pdf"/>

it shows this error
Screenshot 2024-01-25 at 12 28 14 PM

@vinodnimbalkar
Copy link
Owner

Hi @CHETANECINFOSOLUTIONS

<script>
	import PdfViewer from 'svelte-pdf';
</script>

<PdfViewer url='https://raw.githubusercontent.com/vinodnimbalkar/svelte-pdf/369db2f9edbf5ab8c87184193e1404340729bb3a/public/sample.pdf' />

Please check this: https://stackblitz.com/edit/sveltejs-kit-template-default-pjuhkj
image

@CHETANECINFOSOLUTIONS
Copy link
Author

CHETANECINFOSOLUTIONS commented Jan 26, 2024

Thank you for replying.
I have tried this way also still returns same error.

@AlexSimpson97
Copy link

Has anyone got this working in sveltekit? as of April 2024?

@CHETANECINFOSOLUTIONS
Copy link
Author

Has anyone got this working in sveltekit? as of April 2024?

you can try using this library, it works.
https://pdfjs.express/documentation/get-started/svelte

@brianmazzocchi
Copy link

brianmazzocchi commented May 7, 2024

Has anyone got this working in sveltekit? as of April 2024?

I have it working on sveltekit !

@AlexSimpson97
Copy link

Has anyone got this working in sveltekit? as of April 2024?

I have it working on sveltekit !

Have you got a working repo I can take a look at?

@brianmazzocchi
Copy link

Has anyone got this working in sveltekit? as of April 2024?

I have it working on sveltekit !

Have you got a working repo I can take a look at?

Regrettably not, but if you want you can show me your implementation and I can help you with it

@taut-and-yare
Copy link

Has anyone got this working in sveltekit? as of April 2024?

I have it working on sveltekit !

Have you got a working repo I can take a look at?

Regrettably not, but if you want you can show me your implementation and I can help you with it

Unless I'm missing something there's not much implementation to talk about, so let's assume the implementation at the top (initial post on this issue). Or the one in the docs:

<script>
	import PdfViewer from 'svelte-pdf';
</script>

<PdfViewer url='./sample.pdf' />

I also get the same error:
This document requires a password: Setting up fake worker failed: "Cannot load script at: http://localhost:5173/node_modules/.vite/deps/pdfjs-dist/build/pdf.worker.js".

It seems that it goes in here:
https://github.com/vinodnimbalkar/svelte-pdf/blob/master/src/lib/PdfViewer.svelte#L189

But I guess that this has to do with the installation.

In my project, the pdfjs-dist/ directory is located in the root level of node_modules/ instead of in node_modules/.vite/ directory as the error reports. Additionally, upon npm run build I get this warning:

Using @sveltejs/adapter-vercel
Warning: The following modules failed to locate dependencies that may (or may not) be required for your app to work:
node_modules/pdfjs-dist/build/pdf.mjs
- canvas
✔ done
✓ built in 2.57s

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants