How to change MIME-Types in React/Next.js?

[kazooi]

Hi there,

today I tried for several hours to display PDFs on my React/Next.js application. I always got an error because I could not connect the PDF loader. Finally I found the right import syntax to import the loader, but I get an error because I use the wrong MIME Type.

This is the error I get:

Loading the worker from "http://localhost:3000/pdf.worker.min.js" 
was blocked due to an unapproved MIME type ("text/html").

After reading about MIME Types. I installed the package MIME Types for react. I think this should give me the option to change the MIME Type.

However I dont know where I should write the code so that the MIME type will change and I can finally see the PDF.

Can someone please let me know how to change the MIME Types?

Thanks a lot for answers!

[bradtaniguchi]

@kazooi

I always got an error because I could not connect the PDF loader. Finally I found the right import syntax to import the loader, but I get an error because I use the wrong MIME Type.

How are you trying to load the library into your app?

The error you’re seeing looks like your trying to load a JS library, but getting a text/html document back, which isn’t right, so your client-side trying to load blocks it.

Depending on how you’re loading it, the code should be loaded with the meme type of text/javascript, so if you’re seeing text/html you might not actually be loading the file.

You should be able to see the contents of the file within your browser dev tools, so you might be able to see what is actually being loaded. My guess is your loading your index.html, because the file your trying to load (pdf.worker.min.js) isn’t being found/loaded.

[kazooi]

@bradtaniguchi Thank you for your answer!

@bradtaniguchi

How are you trying to load the library into your app?

Actually I got confused about this wired loading method and I wonder why it is not possible to just import the loader as usual. In the React-PDF documentation it is written that the pdf.worker.min.js loader should be imported like this:

pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

@bradtaniguchi

Depending on how you’re loading it, the code should be loaded with the meme type of text/javascript , so if you’re seeing text/html you might not actually be loading the file.

This is what I thought is the issue, but I am not sure how to change the MIME type for this import. Can you help me with that?

---

EDIT: I just started the app again and recognized that it is working now even without importing the loader. However yesterday I got an error everytime, even when I restarted the applicatione. I also deleted the cache, but it did not work for hours!!

Today it works even without the loader, these things drive me crazy