Using React-pdf-Renderer with Symfony/React

[Mareva-dev]

After adding the library using yarn add @react-pdf/renderer my app is stuck with the following errors Module not found : Can't resolve 'stream' ... Module not found : Can't resolve 'zlib' ...

I work with Symfony 5.2 and react > 16. With this configuration you don't use Webpack directly but you have to deal with webpack-encore. This is why the following fixes doesn't work.

To Reproduce : Install Symfony attach React to it add @react-pdf/renderer

Desktop :

• OS: MacOS
• Browse: Chrome
• React-pdf version 2.0.20

Do you know how to apply the following webpack config to webpack encore ? Is there a way to avoid this ?

const webpack = require('webpack');

module.exports = {
 {...}
    resolve: {
        alias: {
            process: 'process/browser',
            stream: "stream-browserify",
            zlib: "browserify-zlib"
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    ]

[mtkarp]

@Mareva-dev I ran into a similar issue using webpack Encore when trying to use this package. Please see the documentation for modifying webpack config here: [https://symfony.com/doc/current/frontend/encore/advanced-config.html]. The documentation was not clear on all the ways the config can be modified, so I've included an example below. I'm not sure if you're still facing this issue, but I hope this helps you or others in the future.

The webpack.config.js file cannot be modified directly. Instead, the file should be modified using some of the built in features from Encore. Below are the modifications I made to webpack.config.js to get the module up and running. I'm not sure if this will resolve all of your issues, but it should be a good starting point.

// webpack.config.js
// The below should exist in your file already
const Encore = require('@symfony/webpack-encore');
// Add this line
var webpack   = require('webpack');

// ... all existing Encore config here

// Add these lines - note that a semicolon ( ; ) should follow this statement if it is the last one in the Encore config.
    .addPlugin(new webpack.ProvidePlugin({
        Buffer: ["buffer", "Buffer"], 
        process: "process/browser",
    }))

// Add this line after all of the configuration items above
const config = Encore.getWebpackConfig();

// Add these lines for your resolve / alias items:
config.resolve.alias = {
    process: 'process/browser',
    stream: "stream-browserify",
    zlib: "browserify-zlib"
}

// Add this line to export the final config - this is important to modify to export the "config" 
// and not the previous line "Encore.getWebpackConfig();" as the modifications are saved to the local variable
module.exports = config;

@diegomura Note that the above can also be adapted if other users are having issues implementing your instructions on adjusting the webpack.config file for Webpack 5 (see the Readme). I do not believe this is an issue with the package.