6

I try to use pdfjs in a small typescript app with parceljs as bundler, but when I load the worker with:

pdfjsLib.GlobalWorkerOptions.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.min.js';

I get this error in the Firefox console:

pdf.worker.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type

and the worker is not loaded.

If I load the worker like this:

pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${(pdfjsLib as any).version}/pdf.worker.min.js`;

everything works fine.

I have looked at the MDN description of the error and I sounds like some server side thing, so is it a limitation of the parcel server and is there a workaround?

Jørgen Rasmussen
  • 1,143
  • 14
  • 31

2 Answers2

3

Check the file permissions of that .js file on your websever.

I had a similar issue where loading one of my .js files failed and Firefox printed the message:

The script from “https://my.website.com/file.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.

Loading failed for the <script> with source “https://my.website.com/file.js”.

All other .js files were sent with the correct content-type "application/javascript", but this one file was sent with "text/html".

The problem was, that while transferring the file to my webserver (using FileZilla) the permissions of the file were set to 600. Setting the file permissions to 705 fixed it. The .js file is now sent with the correct content-type and the Firefox message is gone.

Rckstr
  • 169
  • 7
  • I tried with "chmod 705 build/" (build is the folder contaning pdf.worker.min.js) and it didn't help. – Jørgen Rasmussen Apr 20 '19 at 14:13
  • Did you check that the permission of the file has actually changed? To recursively update permissions of subfolders and all files you need to add parameter "-R" to chmod. [How do I change permissions for a folder and all of its subfolders and files in one step in Linux?](https://stackoverflow.com/a/3740159/3439314) – Rckstr Apr 23 '19 at 19:57
  • No "chmod -R 705 build/" doesn't help either. – Jørgen Rasmussen Apr 24 '19 at 12:24
2

It's happening because of the wrong content-type response header.

Your server is responding with a javascript file with content-type: "text/html" which is wrong.

Change the content-type to "text/javascript".

It should work fine.

Update (11-APR-2019):

I am assuming you are using express framework for http-server. content-type can be set using a middleware.

app.use('*.js', (req, res, next) => {
    res.set('Content-Type', 'text/javascript')
    next();
})

Add this before the static file serving middleware.

Srujan Reddy
  • 730
  • 1
  • 6
  • 27
  • I have googled around to se if I could figure out how to change content-type of an existing .js file, but without success. The file I am having trouble with is pdf.worker.min.js which is a minified file pre-build by the Mozilla PDFJS project. Can you help me with how I can change content-type on a minified .js file? – Jørgen Rasmussen Apr 11 '19 at 06:43
  • Thank you for your answer, but I don't understand. I serve my app from firebase hosting and the it works without problems. I have an other project where I use webpack and the webpack development server can also serve the pdf.worker.min.js without problems. Now, in a new smaller project I chose to use Parcel, because it seems so much easier than webpack, but the Parcel development server gives me this problem that that it won't serve pdf.worker.min.js. So my problem is with Parcel. – Jørgen Rasmussen Apr 15 '19 at 03:59