Webpack 5 working configuration

kelly-tock commented 3 years ago

getting this:

Error: Compiling RuleSet failed: Query arguments on 'loader' has been removed in favor of the 'options' property (at ruleSet[1].rules[5].loader: transform-loader?brfs)
    at RuleSetCompiler.error (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:365:10)
    at /Users/.../node_modules/webpack/lib/rules/UseEffectRulePlugin.js:160:29
    at Hook.eval [as call] (eval at create (/Users/.../node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:41:1)
    at RuleSetCompiler.compileRule (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:175:19)
    at /Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
    at Array.map (<anonymous>)
    at RuleSetCompiler.compileRules (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:151:16)
    at RuleSetCompiler.compileRule (/Users/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:182:30)
    at /Users/kelly/.../node_modules/webpack/lib/rules/RuleSetCompiler.js:152:9
    at Array.map (<anonymous>)

kelly-tock commented 3 years ago

been trying to get a webpack 5 example working, see: https://github.com/foliojs/pdfkit/issues/1195

holitics commented 3 years ago

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?

kelly-tock commented 3 years ago

I have not got it working either 😢

holitics commented 3 years ago

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

kelly-tock commented 3 years ago

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

holitics commented 3 years ago

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

kelly-tock commented 3 years ago

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