react-pdf-render support for React 18

[ShaiMahnai]

My project is using create-react-app 5
having the following issue:

ERROR in ./node_modules/blob-stream/index.js 1:21-47
Module not found: Error: Can't resolve 'stream' in ...

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

Is it possible react-pdf/renderer not supported by react 18?

[karthic-kailanware]

I am using React 18 Kindly support this

[DercilioFontes]

You can solve it using react-app-rewired (https://www.npmjs.com/package/react-app-rewired) to override the Webpack config and by following the config change recommendations at React-pdf Webpack config topic (https://react-pdf.org/advanced#webpack-config). And, it also can require running npm install with --legacy-peer-deps until the package is updated to support React 18.

[ShaiMahnai]

@DercilioFontes thanks for the response.
I can't override my Webpack config - need to use the default one from create-react-app.

[ShaiMahnai]

I am using React 18 Kindly support this

@karthic-kailanware
can you explain? maybe show your package.json file and the usage in code?
thanks

[DercilioFontes]

@ShaiMahnai, you will override only to add the new config properties necessary to have the missing node packages that react-pdf requires and are not added by default in Webpack 5 anymore. The original config will be kept.

The override function gives you the config parameter. You can spread it (...config) and add the new properties.

[ShaiMahnai]

@ShaiMahnai, you will override only to add the new config properties necessary to have the missing node packages that react-pdf requires and are not added by default in Webpack 5 anymore. The original config will be kept.

The override function gives you the config parameter. You can spread it (...config) and add the new properties.

How can I override only specific parameter? Can you please attach an example?

[DercilioFontes]

@ShaiMahnai,

// ./config-overrrides.js

const webpack = require('webpack');

module.exports = function override(config, env) {
  // New config, e.g. config.plugins.push...
  config.resolve.fallback = {
    ...config?.resolve?.fallback,
    process: require.resolve('process/browser'),
    zlib: require.resolve('browserify-zlib'),
    stream: require.resolve('stream-browserify'),
    util: require.resolve('util'),
    buffer: require.resolve('buffer'),
    assert: require.resolve('assert'),
  };

  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
  ];

  return config;
};

Please, check the docs on https://github.com/timarney/react-app-rewired and https://react-pdf.org/advanced#webpack-config.

[bryanltobing]

is there any temp workaround?

[mdodge-ecgrow]

Looks like the https://react-pdf.org/advanced#webpack-config section has been removed for some reason. I remember following that before to get this working. Why has that been removed?

[DercilioFontes]

It seems the new version, 3.0.0, doesn't need it anymore. I tested my project that had it and removed the webpack override, which worked fine. But they could keep the documentation for who is still using it.

[ubRoman]

@diegomura if you don't want to maintain the react-pdf-renderer anymore, just tell us, so we can go for alternatives.

[jeetiss]

duplicate of #1878