PDFs not being found in production build of Create React App project

Technical Support
1

Which product are you using?

PDF.js Express Version

Detailed description of issue
Using Create React App, PDFs do not display when project has been run as build. Instead, the iframe just shows a redirect to the main app index.

This problem can be seen even by running a build version of the Create React App demo you have provided in Github. GitHub - pdfjs-express/pdfjs-express-viewer-react-sample

Expected behaviour
PDFs should load in iframe, just as in development mode.

Does your issue happen with every document, or just one?
All documents

Link to document
Document is in public/files in dev mode, and gets copied to build/files in build version.

Code snippet

...

useEffect(() => {
    WebViewer(
      {
        /** Currently using a free tier, so not worried about this being is source code */
        licenseKey: "XXXXXXXX",
        path: "/webviewer/lib",
        initialDoc: "/files/document.pdf",
      },
      viewer.current
    ).then((instance: any) => {
      const { Core } = instance;

      // adding an event listener for when the page number has changed
      Core.documentViewer.addEventListener(
        "pageNumberUpdated",
        (pageNumber: any) => {
          if (pageNumber === 8) {
            setViewedEntireDoc(true);
          }
        }
      );
    });
  }, []);

...
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hi there,

Create-React-App redirects all 404s to the main index, which causes this weird loop you’re seeing. This means that /webviewer/lib does not exist and is resulting in a 404.

Please ensure your static dependencies are set up correctly and /webviewer/lib actually exists on your server.

Thanks!
Logan

5

Hi Logan

Facing similar issue in local build. Working fine in local NPM start execute. Able to confirm all static dependencies inside build under /webviewer/lib. Trying pdfviewer along with Material Dashboard 2 React: Free MUI & React Admin Template @ Creative Tim. Please help me with your inputs.