Rollup Browser Import

[skch-17]

Hi Guys

First of all thank you very much for your effort. I think you are doing a great deed to us swiss devs.

Now to my problem:

When i try to use the newest version: 3.2.0 with rollup and I try to import it like this:

import SwissQrBill from "swissqrbill/lib/browser/bundle/index.js"

The system starts to do "something":

I am quite new to the whole webtech and currently hitting a wall with this issue.

When i try to use the second approach with the ES modules, it will resolve it just fine.
(At least when I import it like this: import { PDF, BlobStream } from "swissqrbill/lib/browser/esm/browser/pdf.js";)

But then I have to solve the missing requirments:

stream (guessing 'require$$0$3')
fs (guessing 'fs')
zlib (guessing 'zlib')
iconv-lite (guessing 'require$$0$2')
util (guessing 'require$$3')
events (guessing 'events')

That brings my to my two questions:

1. What I am doing wrong / miss with the first approach?
2. Why is only the direct reference to the pdf.js working.

Some background infos:

- It's a browser project.
- Rollup is used as a bundler. v2.61.0
- npm v8.1.2

[schoero]

Unfortunately, I can't give you a good answer because I'm not enough of a rollup expert for this. The difficulty is to bundle the underlying PDFKit as it relies on some built in node modules that you have mentioned.

The easiest way to get it working using rollup is to rely on the prebundeled version in swissqrbill/bundle.
The drawback would be that you wouldn't be able to benefit from tree-shaking that way. But if your package doesn't depend on PDFKit by itself and you use the pdf version of this library, this isn't a huge deal as the majority of the package size comes from PDFKit which you can't tree-shake that way. I have made a working example for that here.
In the /rollup folder, you can find the rollup.config.js that i have used.

If you really want to bundle it yourself, I can't give you any tips right now. But maybe someone else can?

[skch-17]

Thank you for your fast reply.

After some more debuggin with your example project as helper did I found the culprint. Which is quite anoying to be honest.

It seams my whole problem was not, that it did not import it correctly, but rather a warning. The warning now tries to log the line of the file where it occures. (Which made it quite anoying to get to the root of the warning, because it was printet so fast that it has overriden the first lines already.) But the file does basicly only have one line. (which is the whole file ^^)

Warning: https://rollupjs.org/guide/en/#avoiding-eval

When I have more time I will probably look for a solution for bundling it with the project. But as you have stated:

PDFKit by itself and you use the pdf version of this library, this isn't a huge deal as the majority of the package size comes from PDFKit which you can't tree-shake that way.

It won't matter that much, since I do not have a direct dependency to pdfkit. And when I use an older version:
"swissqrbill": "^2.4.2", it does not report the warning. (Which is odd since I think one of the dependencies will use eval.)

I will close the Issue.

[schoero]

And when I use an older version:
"swissqrbill": "^2.4.2", it does not report the warning. (Which is odd since I think one of the dependencies will use eval.)

Yes, I noticed that warning too and I ran into the same problems reading it 😅. With v3.0.0 support for svg rendering was implemented. The warning comes from the library svg-engine, that is used to render svg in Node.js. I think the way eval is used is a valid use case as the input is sanitized. But if bundlers are complaining, I might reconsider that.

Please let me know if you get to find a solution to bundle the project using rollup, I would like to document it in the readme.

[skch-17]

Hei @schoero it's me again. Sorry for the late follow up.

I got the whole thing now working with rollup.

rollup.config.mjs:

alias({
	    entries: [
				{ find: 'fs', replacement: 'pdfkit/js/virtual-fs.js' }
			]
		}),
		inlineCode.default(),
		typescript(),
		resolve({
			browser: true,
			dedupe: ['svelte'],
		}),
		commonjs(),
		nodePolyfills({
			crypto: false,
			sourceMap: false
		}),

The think is you need a lot of plugins to handle the imports from the node packages which are only for backend.

And in the tsconfig.json:

 "compilerOptions": {
        "module": "ESNext",
        "target": "ES2017",
        "strict": false,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "moduleResolution": "nodenext"
    },

I still see an error on the import line for the Blobsteam. VS code or Svelte Plugin or I do not know which component is responsible for showing it thinks, it will use the node version:

import { PDF, types, utils, BlobStream } from "swissqrbill";

But as soon as you build / serve it, it works.