5

I want to print some pdf documents programmatically. and I'm trying for hours now to make this PDFkit library working with webpack.

I've gone form:

Can't resolve 'fs' in ..

to

fs.readFileSync is not a function

then to the warning

[BABEL] Note: The code generator has deoptimised the styling of "E:/MyProjects/accountingsystem/node_modules/brotli/dec/dictionary-da
ta.js" as it exceeds the max of "500KB".

then to

require is not defined - i'm stuck here. All this errors are coming form within the library itself.

I have just one file - app.js with just a single line of code, which is:

const PDFDocument = require('pdfkit');

My final webpack.config.js looks like this:

module.exports = {
// devtool: 'source-map',

entry: './src/app.js',
output: {
    path: path.resolve (__dirname, "dist"),
    filename: "bundle.js"
},

// node: {
//     console: true,
//     fs: 'empty',
//     net: 'empty',
//     tls: 'empty'
// },

// i've added 'target' - following the advice form some github comments.
target: 'node',
module : {
    rules : [
        { test: /\.js$/, loader: 'babel-loader' },
        {
            test : /\.html$/,
            use : [ 'html-loader' ]
        },

        // then i've added this 2 loaders also:
        { test: /\.json$/, loader: 'json-loader' },
        { test: /pdfkit|png-js/, loader: "transform-loader?brfs" }
    ]
},
plugins:[
    new HtmlWebpackPlugin ({
          template : `src/app.html`
    })
],

};

This is literally a 1 line app, and i'm hitting the wall for hours now. I've seen that many users are having issues with fs core module and webpack - and i tried every solution i could find. How hard can it be? What is actually happening here? Any insight is appreciated, Thanks.

AIon
  • 12,521
  • 10
  • 47
  • 73

4 Answers4

3

You can also add it to the externals:

  externals: [
    {
      pdfkit: "commonjs2 pdfkit",
    }
  ]
rasgo
  • 1,381
  • 4
  • 15
  • 28
1

It's possible to make it work with webpack.

pdfmake is a wrapper around pdfkit which works with webpack. As you can see, the webpack.config.js is kind of hacky:

https://github.com/bpampuch/pdfmake/blob/master/webpack.config.js

Personally, I ended up working with pdfmake, which provides a built js file. I you do so, you will have to tweak your webpack.config, use the resolve.alias field to point to the pdfmake built js file.

platane
  • 66
  • 1
0

If you want to use the build version directly, just use:

window.pdfMake = require('pdfmake/build/pdfmake.js');
var vfs = require('pdfmake/build/vfs_fonts.js');
window.pdfMake.vfs = vfs.pdfMake.vfs;
sunix
  • 146
  • 1
  • 8
0

For the next poor soul who runs into this problem, the first issue mentioned of fs.readFileSync is almost certainly this issue: PDFKit - Custom Fonts - fs.readFileSync is not a function

This line in the question is the key to this part of the puzzle:

{ test: /pdfkit|png-js/, loader: "transform-loader?brfs" }

I eventually gave up on this and just imported the built release file (from https://github.com/foliojs/pdfkit/releases) outside of webpack (i.e. with a script src="" reference to the static .js file)

Richard Wheeldon
  • 973
  • 10
  • 25