@react-pdf/renderer doesn't work after moving to v3 gatsby

[vsolanogo]

Steps to reproduce

use this repo
https://github.com/vsolanogo/gatsby-pdf-error

it works if you use package-working.json as your package.json and you will be able to render and update pdf file.

after moving to v3 build breaks with plenty of errors

[bradlocking]

Same issue here, Trying to figure out what node dependency polyfill (which Webpack has removed in v5) I need to add in order to get react-pdf working again.

[vsolanogo]

Is it because react-pdf/renderer doen't support webpack 5? what's the reason of this problem?

[bradlocking]

This was my solution:

yarn add stream-browserify --save

Add this to your webpack config via onCreateWebpackConfig node API:

actions.setWebpackConfig({
    resolve: {
      fallback: {
        "zlib": false,
        "crypto": false,
        "assert": false,
        "util": false,
        "process": false,
        "path": false,
        "_stream_transform": require.resolve("readable-stream/lib/_stream_transform.js"),
        "_stream_passthrough": require.resolve("readable-stream/lib/_stream_passthrough.js"),
        "_stream_readable": require.resolve("readable-stream/lib/_stream_readable.js"),
        "_stream_duplex": require.resolve("readable-stream/lib/_stream_duplex.js"),
        "_stream_writable": require.resolve("readable-stream/lib/_stream_writable.js"),
      },
      alias: {
        "stream": "stream-browserify",
      },
    }
})

[vsolanogo]

doesn't work for me, it builds, but when i visit page with react pdf it breaks with next error in console: typeerror: i.inherits not a function

[bradlocking]

@vsolanogo - You're right, I received a similar error, but may not be completely related. Here's my working implementation (including the packages I needed to install). For some reason resolving process/browser as a module on the global namespace broke other parts of my application, so had to end up shimming it in each file that was needed for react-pdf/renderer to function.

I've stripped out any unrelated business logic in my webpack config that doesn't relate to this issue:

  actions.setWebpackConfig({
    plugins: [
      plugins.provide({
        Buffer: ["buffer", "Buffer"]
      })
    ],
    module: {
      rules: [
        {
          test: [
            require.resolve('browserify-zlib/lib/index.js'),
            require.resolve('readable-stream/lib/_stream_writable.js'),
            require.resolve('readable-stream/lib/_stream_readable.js'),
            require.resolve('browserify-zlib/lib/binding.js')
          ],
          use: [
            {
              loader: 'imports-loader',
              options: {
                type: 'commonjs',
                imports: [
                  'single process/browser process'
                ]
              }
            }
          ]
        }
      ]
    },
    resolve: {
      fallback: {
        "crypto": false,
        "path": false,
        "zlib": require.resolve("browserify-zlib"),
        "util": require.resolve("util/"),
        "assert": require.resolve("assert/"),
        "zlib": require.resolve("browserify-zlib"),
        "_stream_readable": require.resolve("readable-stream/lib/_stream_readable"),
        "_stream_writable": require.resolve("readable-stream/lib/_stream_writable"),
        "process": require.resolve("process/browser"),
      },
      alias: {
        "stream": "stream-browserify"
      }
    },
  });

"devDependencies": {
  "browserify-zlib": "^0.2.0",
  "stream-browserify": "^3.0.0",
  "util": "^0.12.3",
  "assert": "^2.0.0",
  "imports-loader": "^2.0.0",
  "process": "^0.11.10",
  "readable-stream": "^3.6.0",
}

The ideal solution is that we don't need to shim specific node files to include an import to process, and that the package managers themselves need to modify their code so that they don't rely on the global process object, but in the interest of me shipping this without having to wait for that to happen, this will have to suffice.

[vsolanogo]

Uncaught (in promise) ReferenceError: process is not defined
Uncaught (in promise) TypeError: e is null
¯_(ツ)_/¯