Resource interpreted as Stylesheet but transferred with MIME type text/javascript

Question

I have created an application using MVC, Java Script, JQuery, Ajax. When I'm debugging using visual studio it works fine without any script errors. When I am hosting my application on IIS server, it shows console errors and my application styles are not working correctly. I have attached the error below.

Error : Resource interpreted as Stylesheet but transferred with MIME type text/javascript:

Image:

Answer 1

I use react, get same error, I fixed by remove type="text/css" in the link tag, no error, and I verified that the css really get downloaded.

if you remove rel="stylesheet", no error, but css will NOT even download, so this is not a solution, it is a pitfall

        <link href="../src/css/gps/sidenav.css" rel="stylesheet" />  

Answer 2

I have an Angular 6 project working with Docker and ran into this error. I have tried many sensible solutions here but none of them worked for me. I have done research on this error in various ways. Based on the answer here, I have added it to my nginx.conf file as follows.

My nginx.conf file has changed to the following:

http
{
    # The line added.
    include /etc/nginx/mime.types;

    server {
        listen 80;
        listen [::]:80;
        server_name _;
        ...
    }
    ...
}

After this addition, my problem was resolved and the project worked successfully. I hope this answer will help those who are looking for an answer to the problem.

Answer 3

I can't comment due to low rep but this is very important.

The answer that says:

"I had the exact same problem, cause by lines in my HTML in the following form:

<link rel="stylesheet" type="text/css" href="css/my_css_resource.css" />

The problem was fixed when I removed rel="stylesheet" from the tag."

Is HORRIBLY wrong. rel="stylesheet" tells the browser this is a css file. Without it the browser doesn't know what to do with the CSS file, and any design code in it will NOT be executed.

I have confirmed this by removing all occurrences of rel="stylesheet" from my html file: the result was a completely "naked" page, with absolutely no design whatsoever. I have linked both bootstrap css and my own non-empty css, and tested it prior to removing rel="stylesheet" to see that style is actually modified by them.

Mime types are set by the sender of the file, in this case a web server. The error message says that a file sent as plain text by the server, was interpreted as CSS by the browser. In this case the problem is in the server, not in the browser. The browser correctly interpreted this CSS file as a stylesheet. The server should have sent the right mime type.

Again, I am sorry I am posting this as an answer even though it is not, but I can't post comments because of low rep. If a moderator is reading this and want's to remove it, please either post it as a comment to the relevant answer or if possible mark the answer as wrong so people will not suffer because of it.

Answer 4

Another possibility is if you have a lower case rewrite rule in your web.config file, similar to this:

<rule name="LowerCaseRule1" stopProcessing="true">
    <match url="[A-Z]" ignoreCase="false" />
    <action type="Redirect" url="{ToLower:{URL}}" />
</rule>

If you include this type of rule, you need to ensure all of your script and stylesheet links are lower case. If they aren't, you could see this warning.

Answer 5

I also faced this issue with CRA app. I just cleared my browser data and this seems to have fixed this issue. May be some cached files caused this.

Prior to clearing browser data, I check the same build on edge and firefox and it worked as expected.

Error: Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://abcxyz.com/static/css/2.0ce10a16.chunk.css".

Answer 6

Yes,I also see this problem...this problem come because in the .htaccess you add the RewriteRule ...so you have to change the css file directory then it will fix

Answer 7

I had the same error right now, I found out that the css file didn't exists on the server, so, it was returning a 404 page.

So, you need to verify the link of the css.

Resource interpreted as Stylesheet but transferred with MIME type text/javascript

The message above could be interpreted as:

You requested for a css file, but we are sending back to you a javascript file.

If you want to start debugging, I think you should start by ensuring the source of the file.

I hope this helps someone.

Answer 8

I had this same issue and it was due to using the wrong method to create the bundle. I carelessly copied a script bundle code and replaced it with CSS. Make sure you use StyleBundle for CSS and ScriptBundle for JS. Same with when you render it. Styles.Render() and Scripts.Render().

I had this:

bundles.Add(new ScriptBundle("~/bundles/bootstrap-core-css").Include("~/Content/themes/bootstrap/css/bootstrap.min.css"));

I changed to:

bundles.Add(new StyleBundle("~/bundles/bootstrap-core-css").Include("~/Content/themes/bootstrap/css/bootstrap.min.css"));

I hope this helps.

Answer 9

I realized that with my new Windows 10 machine, I'd failed to enable Static Content in my local IIS. To do so, go to "Turn Windows Features On or Off" from your Control Panel, and navigate to the following location:

Make sure this "Static Content" option is checked. Then, bring up a command window as an administrator and perform an iisreset.

Boom, fixed.

Answer 10

I had the exact same problem, cause by lines in my HTML in the following form:

<link rel="stylesheet" type="text/css" href="css/my_css_resource.css" />

The problem was fixed when I removed rel="stylesheet" from the tag.