Document cannot be rendered after update to v9.0.0

[pk-bt]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

After the latest update I started to get the following errors:

I am using cra.

Steps to reproduce

I am importing the module and the pdf worker as following:

import {Document, Page, pdfjs} from "react-pdf";
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
import 'react-pdf/dist/esm/Page/TextLayer.css';
import "./PDFViewer.scss";
import {TextItem} from "pdfjs-dist/types/src/display/api";
import {DocumentCallback} from "react-pdf/src/shared/types";

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

const options = {
    cMapUrl: '/cmaps/',
    standardFontDataUrl: '/standard_fonts/',
};

...

Expected behavior

No errors.

Actual behavior

The PDF document cannot be opened.

Additional information

No response

Environment

• Browser (if applicable): Chrome Android;
• React-PDF version: 9.0.0;
• React version: 18.2.0;
• Webpack version (if applicable): 5.91.0;

[wojtekmaj]

Can you provide a reproducible example? Can't reproduce it on my own samples.

[TheMoonDawg]

@wojtekmaj We noticed in our project that our workerSrc was getting overridden by your default here: https://github.com/wojtekmaj/react-pdf/blob/main/packages/react-pdf/src/index.ts#L23

We set ours up in the entry point of our app, and it's correct until we actually try to use the library. It's then overridden with pdf.worker.mjs instead of our version.

[wojtekmaj]

Doesn't seem to be related with the original issue.

[TheMoonDawg]

I'll make a separate issue then, thanks!

[pk-bt]

Can you provide a reproducible example? Can't reproduce it on my own samples.

I was a little busy the past few days I didn't have time to provide an example, I will try to do it today.

Strangely, the problem is gone if I load the "unpkg" version of the "pdf-worker.min.mjs" and not the react-pdf version of the worker, but with this solution I have some delay of 1-2 seconds before the document starts loading.

[utkershrajvenshi]

@pk-bt Were you able to solve this issue without having the worker being fetched from "unpkg"? I'm having similar issues with v9 except the error I'm getting is: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec

[pk-bt]

@pk-bt Were you able to solve this issue without having the worker being fetched from "unpkg"? I'm having similar issues with v9 except the error I'm getting is: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec

Not yet, haven't had the time to work on the issue, I had to do other things in the meantime.

[pk-bt]

Can you provide a reproducible example? Can't reproduce it on my own samples.

Page source here: https://github.com/pk-bt/react-pdf-example/ The page is deployed here: https://github.com/pk-bt/playground/ View it here: https://pk-bt.github.io/playground/

If I start the project locally in developer mode the component works without problems, I get errors on the production version.

I have noticed some lines at the beginning of the "pdf.worker.min.mjs" on the production that should not be there, in fact the files shown the error console.

[silvertae]

@pk-bt I have similar issue. When I run my application locally it doesn't matter, but pdf file was not loaded after deploy.

I think this code is not working for some enviroment.

// before
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

So I run below code on my terminal to copy workers bundle to my public folder

cp ./node_modules/pdfjs-dist/build/pdf.worker.min.mjs ./public/

and modify above code like this.

// after
pdfjs.GlobalWorkerOptions.workerSrc =
  window.location.origin + "/pdf.worker.min.mjs";

after that it runs well in my deployed app.

I referenced this article https://pspdfkit.com/blog/2021/how-to-build-a-reactjs-viewer-with-pdfjs/ I hope this helps.

[goatrenterguy]

I am facing the same issue

[sureshsamanthapudi]

@pk-bt I have similar issue. When I run my application locally it doesn't matter, but pdf file was not loaded after deploy.

I think this code is not working for some enviroment.

// before
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.mjs',
    import.meta.url,
).toString();

So I run below code on my terminal to copy workers bundle to my public folder

cp ./node_modules/pdfjs-dist/build/pdf.worker.min.mjs ./public/

and modify above code like this.

// after
pdfjs.GlobalWorkerOptions.workerSrc =
  window.location.origin + "/pdf.worker.min.mjs";

after that it runs well in my deployed app.

I referenced this article https://pspdfkit.com/blog/2021/how-to-build-a-reactjs-viewer-with-pdfjs/ I hope this helps.

@silvertae Getting the below error after making the change as you mentioned above. How did you solve this issue.

"Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec."

[silvertae]

@sureshsamanthapudi I've checked my app and I don't seem to be getting the error you mentioned.

In my case, I deployed as an Azure Static Web App using the Microsoft Teams Toolkit. It seems to load fine without the error you mentioned.

Reference this link I think it's worth checking how the path to load the module is set up.

I'm loading the module files like this.

[sureshsamanthapudi]

@sureshsamanthapudi I've checked my app and I don't seem to be getting the error you mentioned.

In my case, I deployed as an Azure Static Web App using the Microsoft Teams Toolkit. It seems to load fine without the error you mentioned.

Reference this link I think it's worth checking how the path to load the module is set up.

I'm loading the module files like this.

It worked fine with the below mentioned code.

pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString();

and add the below mentioned MIME type to nginx.conf

application/javascript mjs;

Thank you @silvertae