Webpack 5 working configuration about pdfkit-webpack-example HOT 24 CLOSED

hi there, I took another stab at it today and also got it working.

it ended up being a combo of a few polyfill methods for me:

new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer'],
    process: require.resolve('process'),
  }),

and

fallback: {
      Buffer: require.resolve('buffer'),
      stream: require.resolve('stream-browserify'),
      'readable-stream': require.resolve('readable-stream'),
      zlib: require.resolve('browserify-zlib'),
      process: require.resolve('process'),
}

and then small adjustment to loader syntax:

{
      enforce: 'post',
      test: /pdfkit[/\\]js\/pdfkit.js$/,
      use: {
        loader: 'transform-loader?brfs',
      },
    },
    {
      enforce: 'post',
      test: /fontkit[/\\]index.js$/,
      use: {
        loader: 'transform-loader?brfs',
      },
    },
    {
      enforce: 'post',
      test: /png-js[/\\]index.js$/,
      use: {
        loader: 'transform-loader?brfs',
      },
    },
    {
      enforce: 'post',
      test: /brotli[/\\]index.js$/,
      use: {
        loader: 'transform-loader?brfs',
      },
    },
    {
      enforce: 'post',
      test: /unicode-properties[/\\]index.js$/,
      use: {
        loader: 'transform-loader?brfs',
      },
    },
    {
      enforce: 'post',
      test: /linebreak[/\\]src[/\\]linebreaker.js/,
      use: {
        loader: 'transform-loader?brfs',
      },
    },

and installing mostly the modules recommended by the console, but then also looking at:

https://github.com/webpack/node-libs-browser

and:

https://github.com/webpack/changelog-v5#automatic-nodejs-polyfills-removed

from pdfkit-webpack-example.

Please could you share your config and what packages to install?

from pdfkit-webpack-example.

been trying to get a webpack 5 example working, see:
foliojs/pdfkit#1195

from pdfkit-webpack-example.

Hi Kelly, have you had luck with a working configuration?

Having similar issues after migration. Have a working webpack 4 build with PDFKit. After upgrading to webpack 5, hitting a wall, even after adding polyfills like stream-browserify and buffer.

Builds fine, but getting the following error during runtime when PDFKit is instantiated:

index.bundle.js:151906 Uncaught (in promise) TypeError: Cannot read property 'prototype' of undefined
at __extends (index.bundle.js:151906)
at index.bundle.js:151921
at Object. (index.bundle.js:152050)
at Object../node_modules/restructure/src/EncodeStream.js (index.bundle.js:152054)
at webpack_require (index.bundle.js:202231)
at fn (index.bundle.js:202464)
at Object. (index.bundle.js:151449)
at Object../node_modules/restructure/index.js (index.bundle.js:151487)
at webpack_require (index.bundle.js:202231)
at fn (index.bundle.js:202464)

Do you or possibly anyone else have a working webpack 5 configuration including polyfills and required modules that they could share here?

from pdfkit-webpack-example.

I have not got it working either 😢

from pdfkit-webpack-example.

Hi Kelly, I finally managed to get it working (after about 3 days of pain). I'm happy to review your webpack.config.js file to see what you may be missing w/r/t what I managed to do. FYI I got some hints from the following example code: https://github.com/bpampuch/pdfmake/blob/master/webpack.config.js

from pdfkit-webpack-example.

Yup, changes look about the same. I didn't have to include readable-stream as a fallback nor change the loader syntax though.

from pdfkit-webpack-example.

Yeah we still had the really old loader syntax that was dropped in webpack 5.

from pdfkit-webpack-example.

I just created a webpack 5 example showing how to bundle or load binary content at https://github.com/foliojs/pdfkit/tree/master/examples/webpack

from pdfkit-webpack-example.

I just created a webpack 5 example showing how to bundle or load binary content at https://github.com/foliojs/pdfkit/tree/master/examples/webpack

But you are saying this does not work for production? There's no solution for pdfkit with webpack 5? Cheers.

from pdfkit-webpack-example.

But you are saying this does not work for production? There's no solution for pdfkit with webpack 5? Cheers.

It works. What does not work is minimizing the specific app feature (create function at fly)

from pdfkit-webpack-example.

Sorry I'm not sure what I'm doing.
I get this Error: Cannot find module 'browserify-zlib'.
I tried to install that but it gives other errors.

from pdfkit-webpack-example.

Just copy the dependencies and devDependencies in package.json, copy the webpack config and install. Otherwise publish the code somewhere so we can properly evaluate

from pdfkit-webpack-example.

I copied the whole webpack directory then installed. The only change was I deleted the local pdfkit in package.json and installed with pdfkit install -s

from pdfkit-webpack-example.

Should work out of box. Did you instaled using npm or yarn ?

I will check in a second computer to make sure

from pdfkit-webpack-example.

Npm. These fall back packages seem to be the problem. Do you have them installed globally? Can you exclude pdf kit from minification to fix that problem?

from pdfkit-webpack-example.

Do you have them installed globally?

No. Just used yarn. Maybe they were added because i upgraded from the webpack4 setup that automatically installs all dependencies.

I will try to rebuild the install without a lock file and removing the node_modules

from pdfkit-webpack-example.

I fixed and cleaned the example at https://github.com/foliojs/pdfkit/tree/master/examples/webpack. Please take a look

from pdfkit-webpack-example.

Thanks for your time.
I tried to run prod and dev but i get this error?
Error: Cannot find module 'browserify-zlib'
On the folder i just did npm install if thats right.

from pdfkit-webpack-example.

What node version and OS are you using?

I just run with npm install without issues. Be sure to remove any lock files and delete node_modules folder

from pdfkit-webpack-example.

Thanks for reply.
Windows 10. Just updated node to 14.17.4.
I just copied your files again fresh from webpack folder run install then run prod.

from pdfkit-webpack-example.

Thanks. Please take a new look. Should be fixed now

from pdfkit-webpack-example.

Hello i'm getting the same errors
i added a webpack.config.js file with the code in the ewebpack folder and added the dependencies ,i removed the node_modules
and the lock file
but still same errors

from pdfkit-webpack-example.

Fork the pdfkit repository, go to examples/webpack folder

Run yarn or npm install

Run npm run dev

Report any error to pdfkit repository

from pdfkit-webpack-example.