Pdfkit: TypeError: fs.readFileSync is not a function

[KharareManisha555]

Uncaught (in promise) TypeError: fs.readFileSync is not a function
at eval (/node_modules/unicode-properties/index.js:18)
at dynamic-import.js?hash=c420b875134db38cac8a36cedf5da29f6d9ae7d2:138
at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
at require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:268)
at eval (/node_modules/fontkit/index.js:32)
at dynamic-import.js?hash=c420b875134db38cac8a36cedf5da29f6d9ae7d2:138
at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
at require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:268)
at eval (/node_modules/pdfkit/js/pdfkit.js:17)
at dynamic-import.js?hash=c420b875134db38cac8a36cedf5da29f6d9ae7d2:138
at fileEvaluate (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:346)
at Module.require (modules-runtime.js?hash=b819d45cbf32aff410d740fac0364cb4088cd3f2:248)
at Module.moduleLink [as link] (modules.js?hash=7a7d0648bba19b26317e6ff4e14880a0f7697d17:336)
at eval (PreviewPaper.jsx:1)

[danthegoodman]

Your stack trace has .jsx in it. It looks like you're trying to it in the browser, but that you're using the node version. Have you followed the Browser Usage steps? http://pdfkit.org/#browser_usage

[fishenal]

I got the same problem, browser version with 'blob-stream', fs.readFileSync errors;

TypeError: fs.readFileSync is not a function
at Object. (index.js:10)
at Object../node_modules/unicode-properties/index.js (index.js:142)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object. (index.js:24)
at Object../node_modules/fontkit/index.js (index.js:14938)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Module. (pdfkit.es5.js:1)
at Module../node_modules/pdfkit/js/pdfkit.es5.js (pdfkit.es5.js:5101)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object../src/pages/Reporter/Editor/PdfPreview.js (PdfPreview.js:10)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object../src/pages/.umi/router.js (router.js:51)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at oldRender (umi.js:20)
at runtimePlugin.js:60
at umi.js:32

[boomsya]

the same problem
maybe problem in webpack 4?

npm install fs
npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.

• [email protected]
  added 1 package in 23.65s

[liborm85]

pdfkit webpack example is here

[boomsya]

very strange example: Error: File 'data.trie' not found in virtual file system

[liborm85]

Similar transformation is used in pdfmake https://github.com/bpampuch/pdfmake/blob/0.1/webpack.config.js and it works.

[boomsya]

thanks. But i have this problem:

./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');";
                    }
                }
            ]})
},

[jacobhobson]

I'm having this same issue. Anything new?

[agamemnus]

Same issue.

[look4regev]

guys, isn't it a simple nodejs version issue? See similar issue: https://stackoverflow.com/questions/60247493/typeerror-opendirsync-is-not-a-function

[schalkneethling]

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
open
openImage
image

Btw, I built this with everything from Node 12-15. Node 15 fails completely but that is on the Browserify side.

[schalkneethling]

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.

[schalkneethling]

UPDATE: The example from Codepen runs without any issues.

[schalkneethling]

UPDATE: Using the same sample code, I have switched from using the script tags to using Browserify again i.e. require PDFKit and blob-stream, and all still builds and works correctly. Seems more and more to be an issue with the integration between PDFKit and Basic Primitives.

[schalkneethling]

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 :)

[Elif5757]

Same issue.

[rafasgj]

I'm having the same issues, and have followed the process to run in the browser.

[rafasgj]

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.