CODEWITHSUNDEEP
javascriptreactjs
maxwell3739
maxwell3739

Reputation: 11

React Browser Error (MIME Type not Executable)

I am following a basic tutorial for a react app and was hit with this error in the browser.

"Refused to execute script from 'http://localhost:8080/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled."

I cannot find any support online for this error and would like to understand what the problem is. I have spent about 2 hours trying to debug. One forum mentioned it was in-browser cookies but this was not the problem. I believe it may be something to do with my index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ReactJS Sample Project</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

Let me know if you have any ideas! I am relatively new to coding and it is frustrating hitting a dead end so early in a project.

Upvotes: 0

Views: 8318

Answers (5)

Kamal Raj Timilsena
Kamal Raj Timilsena

Reputation: 1

I solved the problem by only keeping the dist files in the deployment server which is lighter version of the jsx files you mentioned. You can create the dist by: Npm run build After that you will need to remove everything except the dist to get rid of that error

Upvotes: 0

Andrew Harrison
Andrew Harrison

Reputation: 63

If you open the Network tab in Developer tools and look at the error (might be in the Headers tab within Network) what URL do you see that it is attempting to obtain the bundle.js file from. The answer may be as simple prefixing bundle.js with a slash (i.e. src="/bundle.js") if you are using client-side routing.

Upvotes: 0

Badrush
Badrush

Reputation: 1287

This problem appears to occur when a package manager like npm is used. The following stack overflow answer solved the problem for me. You need to just use the CDN link to the library using tag.

How to use Tesseract.js in a React app

Upvotes: 0

Tamas Hegedus
Tamas Hegedus

Reputation: 29936

If you are developing a single page HTML5 application then chances are the default server is configured to send index.html back for every resources not found instead of 404 to enable full page refresh for every virtual path in your application. Now if bundle.js is not present for any reason, then you get back a legitimate html response. You have to debug your application, or at least tell us more details about what you are using.

To debug your application, open the developer tools, go to the network panel, and refresh the page to see the resources being loaded.

Upvotes: 0

Quentin
Quentin

Reputation: 944150

The browser is asking the server to give it bundle.js.

Then the server is responding with "Here is bundle.js, it is an HTML document".

This means one of two things:

  1. It is an HTML document (with an odd URL)
  2. It is a JS file, but the server thinks that it is HTML

The first thing to do is to look at the data in the file. You could do this by looking at the Network tab in the developer tools in your browser.

If it is JS, then you need to fix your server so it sends the correct Content-Type header for JavaScript (application/javascript).

If it isn't JS, you need to figure out why. Possibly you have the wrong URL. Possibly the server isn't set up so it can serve your JS at all.

Whatever the problem, you will need to examine your HTTP server more than the client side code you shared in the question.

Upvotes: 2

Related Questions