Sveltejs with Paged.js

Hello

I’m trying to use Paged.js in Sveltekit. And to do this I’m trying to follow some example code of doing a similar objective but using Reactjs.

I’m trying to import pagedjs using:

import { Previewer, registerHandlers, Handler } from 'pagedjs';

However, I"m running into this issue - https://github.com/vitejs/vite/issues/1488

The stacktrace, if it helps, is:


 > node_modules/vite/dist/node/chunks/dep-be032392.js:30265:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "pagedjs". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "pagedjs". The package may have incorrect main/module/exports specified in its package.json.
    30265 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
          ╵           ^
    at packageEntryFailure (/home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:30265:11)
    at resolvePackageEntry (/home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:30261:9)
    at tryNodeResolve (/home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:30036:11)
    at Context.resolveId (/home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:29896:28)
    at Object.resolveId (/home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:42356:55)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async resolve (/home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:42547:26)
    at async /home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:42669:34
    at async callback (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:832:28)
    at async handleRequest (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:664:30)

   node_modules/vite/dist/node/chunks/dep-be032392.js:42659:18: note: This error came from the "onResolve" callback registered here
    42659 │             build.onResolve({
          ╵                   ~~~~~~~~~
    at setup (/home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:42659:19)
    at handlePlugins (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:756:23)
    at Object.buildOrServe (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1044:7)
    at /home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1895:17
    at new Promise (<anonymous>)
    at Object.build (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1894:14)
    at Object.build (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1749:51)
    at /home/anton/git/language-learner/my-book/node_modules/vite/dist/node/chunks/dep-be032392.js:42506:54
    at Array.map (<anonymous>)

   html:/home/anton/git/language-learner/my-book/src/routes/index.svelte:6:54: note: The plugin "vite:dep-scan" was triggered by this import
        6 │   import { Previewer, registerHandlers, Handler } from 'pagedjs';
          ╵                                                        ~~~~~~~~~

> Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-be032392.js:30265:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "pagedjs". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "pagedjs". The package may have incorrect main/module/exports specified in its package.json.
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-be032392.js:30265:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "pagedjs". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "pagedjs". The package may have incorrect main/module/exports specified in its package.json.
    at failureErrorWithLog (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1493:15)
    at /home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1149:7)
    at /home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:1258:14
    at /home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/anton/git/language-learner/my-book/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:376:20)
    at Socket.emit (domain.js:470:12)

Any help is greatly appreciated.

Hi there!

Thanks!

We’re gonna have a look and we’ll probably add the src in the published version.
Our main dev is away for a couple of weeks, but this should happen soon.

Thanks Julien, this is greatly appreciated

you’re welcome!

I’m curious about vite.js seems a pretty interresting tool!

Hi!

I was really hoping to be able to use Svelte with Paged.js

  1. What is the status with this? Is PagedJS currently not possible to use with Svelte?
  2. Does there exist a workaround?

Any feedback is greatly appreciated!

I think I got it working! I just added the paged-script to the head element instead of importing it as a module. Also I turned off SSR.

<svelte:head>
	<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</svelte:head>

However, I’m still interested in the future of Paged.js and Svelte.js compatibility so question 2 above still stands I guess. I really hope they will work well together (Svelte is very nice)

Now i’ll create some PDFs! :slight_smile:

Another error

When running the production build I get the following the console

Uncaught (in promise) DOMException: Failed to execute 'querySelectorAll' on 'Element': 'a.s-E-_th5vfGVDv.s-E-_th5vfGVDv:after:not([data-target-counter-fd5481cb-6bf1-4879-9efc-ba3496e3dd98])' is not a valid selector.

It does work when running the dev build, however.

Does the error msg above ring any bells?

Edit: I am kind of stuck here and not currently able to use PagedJS due to the following two problems:

“src file should be published with the rest.”
https://gitlab.pagedmedia.org/tools/pagedjs/-/issues/353

and

" target.selector.split(/::?/g);"
https://gitlab.pagedmedia.org/tools/pagedjs/-/issues/305

I have tried to make a fork of pagedjs but it fails on npm install due to node-gyp things, so I’m currently not able to even make a workaround of my own.

@julien I could be wrong, but it seems as if the above require quite small small fixes. Do you have any status update on whether these will be fixed in the near future? If not, then I would like to know that as well. We are a climate non-profit and we are trying to use pagedjs for creating some of our public reports, hopefully we can do that!

All feedback is very appreciated!

Edit 2: So I got it working. This is what I did
a) fork the repo, clone it
b) run sudo apt install libgs-dev (undocumented!)
c) run npm i
d) do changes to code (see links above)
e) run npm run build
f) copy dist/paged.polyfill.js to your project manually and place it in /static
g) include it in the <svelte:head><script src="/paged.polyfill.js"></script></svelte:head>

I’m sorry @einar, with the whole pagedjs repo move, i got completely side tracked and everything got postponed.

Fred is back on making things work, i’ll make sure he sees all that and publish the right things!
Did you get what you need out of your setup yet? I’ll be curious to see your work

1 Like

Hi! I got it to a working state by using the method described above. Great if a fix could be implemented.

However, right now I’m unsure about the future due to the fact that we need to provide reports that meet accessibility criteria. I might have been naive to think that those things would just work out of the box.

So we might abandon pdf:s and just publish as html since that removes the hurdle of transforming to pdf an keep accessibility features (lots of both known and unknown unknowns here).

I do believe that providing HTML is always the better move. PDF is really useful for print imho.

As soon as you don’t forget the css for @media print , it’s all fine by me :slight_smile:

You can also check this small js experiment i made to allow parametric printing (especially for accessibility [ dyslexia, etc. ]) to have some control on what you print. We use that in our webbook setup where we offer HTML through 11ty and print through this paged.js interface.


(code here: https://gitlab.coko.foundation/pagedjs/parametricpagedjs).

If you’re making long reports, that would help quite a bit i think.

Feel free to ask if you have questions, or anything, i’ll try to be faster tro answer than last time :slight_smile: