PDF not displaying in PdfViewerComponent after build in React

[Khushbu Maurya]

I'm working on a React project where users can upload a PDF file using an UploaderComponent, and the selected file is displayed in a PdfViewerComponent. This functionality works perfectly in my local development environment, but after creating a production build, the PDF fails to display in the PdfViewerComponent.

Setup Details:

• UploaderComponent: Allows users to upload a PDF file.
• PdfViewerComponent: Renders the uploaded PDF for viewing.
• React version: 18
• PDF viewer library:

"@syncfusion/ej2-react-buttons": "^28.1.36",

    "@syncfusion/ej2-react-dropdowns": "^28.1.36",

    "@syncfusion/ej2-react-grids": "^28.1.36",

    "@syncfusion/ej2-react-inputs": "^28.1.33",

    "@syncfusion/ej2-react-navigations": "^28.1.36",

    "@syncfusion/ej2-react-notifications": "^28.1.33",

    "@syncfusion/ej2-react-pdfviewer": "^28.1.36",

    "@syncfusion/ej2-react-popups": "^28.1.33",

    "@syncfusion/ej2-react-splitbuttons": "^28.1.33",

Problem:

• In development mode: PDF uploads and displays correctly.
• In production build: The uploaded PDF does not render in the PdfViewerComponent.

Observations:

1. Error in console while uploading files
   
   

Example Code:

UploaderComponent:

  <UploaderComponent
                        name="files"
                        multiple={false}
                        autoUpload={true}
                        type="file"
                        uploading={onUpload}
                        success={onSuccess}
                        selected={onSelect}
                        removing={onRemove}
                        allowedExtensions=".pdf"
                        asyncSettings={asyncSettings} />


    const onSelect = (args: SelectedEventArgs) => {
        setInputList([]);
        args.customFormData = [{ "files": args.filesData[0].name }];
        if (args.filesData.length) {
            const file = args.filesData[0].rawFile as any;
            const reader = new FileReader();
            reader.addEventListener('load', function () {
                console.log("base 64", reader.result as string)
                setInputFile(reader.result as string);
            }, false);
            if (file) {
                reader.readAsDataURL(file);
            }
        }
    }

PdfViewerComponent:

 <PdfViewerComponent
                                documentPath={inputFile}
                                enableTextSelection={true}
                                enablePrint={true}
                                id="container"
                                documentLoad={documentLoad}
                                // formFieldDoubleClick={formFieldDoubleClick}
                                ref={(scope: any) => { viewer = scope; }}
                                // serviceUrl={`${apiHost}/pdfviewer`}
                                resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
                                enableFormFieldsValidation={true} showNotificationDialog={true} style={{ 'height': '70vh' }}>
                                <Inject services={[Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]} />
                            </PdfViewerComponent>

    const documentLoad = (event: any) => {
        setInputList([]);
        let viewer = document.getElementById('container') as any;
        if (viewer &&  viewer.ej2_instances && viewer.ej2_instances[0]) {
            viewer.ej2_instances[0].formFieldCollections.forEach((element:any,index : number) => {
                if(element.type !== "Checkbox" || element.type !== "DropdownList"){
                    element.tooltip = element.name;
                }
            });
            setPages(JSON.parse(event.pageData));
            setShowInputEnable(true);
        }
    }

[Sathiyaseelan Kannigaraj]

Hi Khushbu Maurya,

Thank you for reaching out to us. We tested a simple sample using the code block you provided to upload the PDF into the PDF Viewer, but the issue did not occur. Below, we have included the sample we tested. Since you mentioned that the issue occurs in the production environment, provide the production environment details. This will help us replicate the issue in the environment, investigate the issue, and provide an appropriate solution.

Sample tested 

Regards,
Sathiyaseelan K