issue using pdf renderer -

[amlwwalker]

Hi, I have it working for all other formats except pdf. Is there anything I am doing wrong? I always see this:

My code is:

<DocViewer pluginRenderers={DocViewerRenderers} documents={[{uri: `https://rest.fs.neo.org/v1/get/${item?.parentID}/${item?.id}`, fileType: "pdf"}]} />

importing

import DocViewer, {DocViewerRenderers} from "react-doc-viewer";

this works perfectly for all other formats/extensions and the URL works fine in the browser - I can see the pdf.

In the console I see

Warning: Error: Setting up fake worker failed: "Importing a module script failed.".

Interestingly, if I change it to: <DocViewer pluginRenderers={[PDFRenderer]} I now see

any help appreciated.

[devAbreu]

Hello @amlwwalker

I was having the same error Warning: Error: Setting up fake worker failed: "Importing a module script failed." and ended up fixing it with this workaround. According to the documentation on Custom Renderer, we can create a custom renderer. So, I made my own CustomPDFRenderer in JavaScript to use the worker from a CDN.

import React from "react";
import { pdfjs, Document, Page } from "react-pdf";
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.min.mjs`;

const CustomPDFRenderer = ({ mainState }) => {
    const { currentDocument } = mainState;
    if (!currentDocument) return null;

    return (
        <div id="my-pdf-renderer">
            <Document
                file={currentDocument.uri}
                onLoadError={(error) => console.error("Error loading document:", error)}
                onSourceError={(error) => console.error("Error with document source:", error)}
            >
                <Page pageNumber={1} />
            </Document>
        </div>
    );
};

CustomPDFRenderer.fileTypes = ["pdf", "application/pdf"];
CustomPDFRenderer.weight = 1;

export default CustomPDFRenderer;

Now, I can use it in the DocViewer component:

<DocViewer
     ....
     pluginRenderers={[CustomPDFRenderer, ...DocViewerRenderers]}
     ....
/>

[jonas1812st]

Hello @devAbreu

Thank you really much for your answer to this issue because I also had some trouble fixing it. You answer really helped. I only had to add one small thing so that your code works:

This line has to be inside of the custom pdf renderer component:

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.min.mjs`;

Like this:

const CustomPDFRenderer = ({ mainState }) => {
    const { currentDocument } = mainState;
    if (!currentDocument) return null;

    pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.min.mjs`;

   ...

This resolved the issue for me.