pdfkit: Can't resolve 'fs' in .../...node_modules\pdfkit\js' - webpack loader issue

My webpack.config.js looks like this:

module.exports = {
    // devtool: 'source-map',
    entry: './src/app.js',
    output: {
        path: path.resolve (__dirname, "dist"),
        filename: "bundle.js"
    },
    module : {
        rules : [
            { test: /\.js$/, loader: 'babel-loader' },
            {
                test : /\.html$/,
                use : [ 'html-loader' ]
            }
        ]
    },
    plugins:
        [ new HtmlWebpackPlugin ({
              template : `src/app.html`
          })
        ]
};

In my app.js i have just this line: - nothing else. const PDFDocument = require ('pdfkit'); Which gives me the following errors:

ERROR in ./~/pdfkit/js/document.js
Module not found: Error: Can't resolve 'fs' in 'E:\0000 Path..\node_modules\pdfkit\js'
 @ ./~/pdfkit/js/document.js 26:7-20
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

ERROR in ./~/pdfkit/js/image.js
Module not found: Error: Can't resolve 'fs' in 'E:\0000 Path...\node_modules\pdfkit\js'
 @ ./~/pdfkit/js/image.js 11:7-20
 @ ./~/pdfkit/js/mixins/images.js
 @ ./~/pdfkit/js/document.js
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

I can’t get this library working with webpack in any way. Please can you give me an example that uses webpack instead of broweseify?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 16 (1 by maintainers)

Most upvoted comments

Does anyone know whether PDFKit is compatible with WebPack version 4? The previous solutions do not work anymore … I’m getting

Can't resolve 'fs'

for pdfkit/js/document.js, pdfkit/js/image.js, pdfkit/js/font/afm.js, png-js/png-node.js.

I have no clue what has changed from WebPack 3 to WebPack 4 … If anyone has got this working with WebPack 4.0, I’d very much appreciate it.

matdoering on Jan 15, 2019

including the browser releases for pdfkit and blobstream worked for me https://github.com/devongovett/pdfkit/releases https://github.com/devongovett/blob-stream/releases

import blobStream from '../libs/blob-stream';
import pdfkit from '../libs/pdfkit';

since they don’t rely on fs

Hecklit on Aug 9, 2017

I ran into the same problem and adding these 2 loaders into webpack’s config solved the problem. Basically they make webpack run all pdfkit-related packages through browserify with the brfs transform (by invoking the transform-loader) and also inline the ./data.json file inside unicode-properties (one of pdfkit’s dependencies) (invoking the json-loader). Note that you also need to install the brfs module.

I didn’t have to set {node: {fs: 'empty'}}.

{
  module: {
    rules: [
      {
          test: /node_modules\/(pdfkit|fontkit|png-js|linebreak|unicode-properties|brotli)\//,
          loader: "transform-loader?brfs"
      },
      {
        test: /node_modules\/unicode-properties.*\.json$/,
        use: 'json-loader',
      },
    ]
  }
}

huy-nguyen on Aug 10, 2017

@dicbrus i used jsPdf but is not that powerful. Adding:

node: {
  fs: "empty"
}

to my webpack.config.js Didn’t work either for me - but do try because lot’s of other people say it works…

AionDev on Jul 7, 2017

For the record I summarize what did the trick for me. Many thanks to @huy-nguyen for the solution and @kelly-tock for the tip about the brfs version!

I started my project with Vue.js starter project webpack.

In package.json I changed webpack version to 3:

    "webpack": "^3.12.0",

Naturally, I added pdfkit to my dependencies:

    "pdfkit": "^0.8.3",

Then, I added the following devDependencies:

    "transform-loader": "^0.2.4",
    "brfs": "^1.5.0"

Finally, I fixed the webpack config in the file build/webpack.base.conf.js by adding the following rules to module.rules array:

      {
        test: /node_modules\/(pdfkit|brotli|fontkit|linebreak|png-js|unicode-properties|)\/.*\.js/,
        loader: 'transform-loader?brfs'
      },
      {
        test: /node_modules\/(unicode-properties|fontkit).*\.json$/,
        use: 'json-loader',
      }

In one of my source files I included PDFKit using require:

const PDFDocument = require('pdfkit');

Finally my project built and let me use PDFKit without dirty workarounds! 😃

tinxx on Nov 21, 2018