I am getting 'Page Unresponsive', when I am trying to render my pdf using react-pdf/renderer

Question

here are my library versions:

"@react-pdf/renderer": "^3.1.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

I am sure enough that all the props passed in the below mentioned file are 100% correct in every manner. Issue is that that it loads some time and freezes sometimes.

As a debug you can also paste my code to official playground, You can observe that what I am going through.

Also I have wrapped the downLoad File in

<PDFViewer>
   <DownloadFile
      profileImg={profileImg}
   />
</PDFViewer>

below Is the code of my "DownloadFile.js", Thanks in advance for you help! and if anyone can suggest some alternative library than that's also good for me at this point of time

import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';

const styles = StyleSheet.create({

    coverPage: {
        backgroundColor: "#AFEBEB",
    },
    coverPageInner: {
        margin: '50px 48px 50px 0',
        backgroundColor: "#FFFFFF",
    },
    coverPageHeader: {
        margin: '72px 63px 0 0',
        height: '64px',
        backgroundColor: '#4BA5A1',
        padding: '10px 43px 10px 139px',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    coverPageHeaderLogo: {
        backgroundColor: "#FFFFFF",
        padding: '5px 9px',
        borderRadius: '50%',
        height: '44px',
        width: '44px',
        objectFit: 'contain'
    },
    coverPageHeaderText: {
        color: "#ffffff",
        fontSize: '24px',
        lineHeight: '40px',
        fontWeight: '800',
        margin: '0 0 0 10px'
    },
    coverPageMiddle: {
        margin: '75px -22px 75px 116px',
        backgroundColor: '#4BA5A1'
    },
    coverPageMiddleText: {
        fontSize: '48px',
        fontWeight: 'extrabold',
        lineHeight: '50px',
        color: '#FFFFFF'
    },
});

// Create Document Component
function DownloadFile({ profileImg }) {

    return (
        <Document>
            <Page size={"A4"} style={styles.cover__page}>
                <View style={styles.cover__page__inner}>
                    <View style={styles.cover__page__header}>
                        <Image style={styles.cover__page__header__logo} src={profileImg} alt='' />
                        <Text style={styles.cover__page__header__text}>Vardhaman Textiles</Text>
                    </View>
                    <View style={styles.cover__page__middle}>
                        <Text style={styles.cover__page__middle__text}>GHG Emission Report</Text>
                    </View>
                    <View style={styles.cover__page__lower}>
                        <Text>Powered by</Text>
                        <Image src="/assets/images/sideBarLogo.svg" alt="GreenStitch" />
                    </View>
                </View>
            </Page>
        </Document>
    )
};

export default DownloadFile

Answer 1

use react-app-rewired to update the webpack config example:

// config-overrides.js in root folder

const webpack = require("webpack");

module.exports = function override(config, env) {
    config.resolve.fallback = {
        ...config.resolve.fallback,
        stream: require.resolve("stream-browserify"),
        buffer: require.resolve("buffer"),
        assert: require.resolve("assert"),
        crypto: require.resolve("crypto-browserify"),
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        os: require.resolve("os-browserify/browser"),
        "process/browser": require.resolve("process/browser"),
        zlib: require.resolve("browserify-zlib"),
    };
    config.resolve.alias = {
        ...config.resolve.alias,
        "react/jsx-dev-runtime.js": "react/jsx-dev-runtime",
        "react/jsx-runtime.js": "react/jsx-runtime",
    };
    config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"];
    config.plugins = [
        ...config.plugins,
        new webpack.ProvidePlugin({
            Buffer: ["buffer", "Buffer"],
        }),
        new webpack.ProvidePlugin({
            process: "process/browser",
        }),
    ];
    console.log(config.resolve);
    console.log(config.plugins);

    return config;
};

also change from @react-pdf/renderer to react-pdf-renderer-v2

and update your react scripts to look like this:

"scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewiredtest",
        "eject": "react-scripts eject"
    }

install all required dependencies and run: npm start or yarn start