./node_modules/brotli/dec/dictionary-browser.js
Module not found: Error: Can't resolve 'fs' in 'app\app\node_modules\brotli\dec' client:209
./node_modules/fontkit/index.js
Module not found: Error: Can't resolve 'fs' in 'app\app\node_modules\fontkit' client:209
./node_modules/linebreak/src/linebreaker.js
Module not found: Error: Can't resolve 'fs' in 'app\app\node_modules\linebreak\src' client:209
./node_modules/pdfkit/js/pdfkit.es5.js
Module not found: Error: Can't resolve 'fs' in 'app\app\node_modules\pdfkit\js' client:209
./node_modules/png-js/png-node.js
Module not found: Error: Can't resolve 'fs' in 'app\app\node_modules\png-js' client:209
./node_modules/unicode-properties/index.js
Module not found: Error: Can't resolve 'fs' in 'app\app\node_modules\unicode-properties'
and yours example cleans only pdfkit :(
		enforce: 'pre',
		test: /pdfkit[/\\]js[/\\]/,
		loader: StringReplacePlugin.replace({
			replacements: [
					pattern: "import fs from 'fs';",
					replacement: function () {
						return "var fs = require('fs');";
          
I installed pdfkit and blob-stream with yarn and require them as follows in my src file:
const PDFDocument = require("pdfkit");
const blobStream = require("blob-stream");
I run this through Browserify using:
"build": "browserify ./src/download-pdf.js -o ./js/download-pdf.js",
and then include the browserified version as follows:
<script src="js/download-pdf.js"></script>
When I execute the code in the browser I get:
Uncaught TypeError: fs.readFileSync is not a function
openImage
image
Btw, I built this with everything from Node 12-15. Node 15 fails completely but that is on the Browserify side.
          
I have now tried using the following import from https://codepen.io/blikblum/pen/gJNWMg?editors=1010
<script
        src="https://github.com/devongovett/pdfkit/releases/download/v0.10.0/pdfkit.standalone.js"></script>
    <script
        src="https://github.com/devongovett/blob-stream/releases/download/v0.1.3/blob-stream.js"></script>
Same problem even though the demo works without any problem. With that said, other than the above script tags, my code is different so, I will need to see what happens if I simply copy the example from Codepen above.
Btw, anyone else here attempting to use PDFKit with Basic Primitives? That is my use case.
          
UPDATE 2: What I found is that in the browser, I reckon you need to provide images as a base64 encoded data url. If you do this, then the conditional logic will not go into the portion of the code that uses fs.readFileSync and so no more error.
When in Nodeland, anything goes :)
          
If anyone is hit by this issue, while it is not fixed, I found a workaround, which I don't even claim to be a nice one, but one that fixed the generation o PDF, in browser. I'm using pre-compiled versions of PDFKit (0.11.0) and blob-stream.js (0.1.3), as available in their Github repositories.
In order to be able to add an image that is accessible through an URL, I had to load the image as a hidden element in the page:
<img id="tux"
    crossOrigin="anonymous"
    src="/images/tuxgauderio.png"
    style="display: none"/>
Create a function that would convert the image data to a bas64 blob, using a Canvas:
function getBase64Image(img_id) {
    // Create an empty canvas element
    img = document.getElementById(img_id)
    var canvas = document.createElement("canvas")
    canvas.width = img.width
    canvas.height = img.height
    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d")
    ctx.globalAlpha = 0.4
    ctx.drawImage(img, 0, 0)
    // Get the data-URL formatted image
    var dataURL = canvas.toDataURL("image/png")
    return dataURL
Add the image to the PDF document, in what I thin is a regular way:
    doc.addPage()
        .image(getBase64Image('tux'), 250, -30, {fit: [790, 790], opacity: 0.3})
With this I was able to add and control the image appearence in the document, running everything in the browser (I don't even have node or npm installed on my system).
Hope this does help anyone.