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:

Can you show where you configure the js bundles? There should be a class somewhere that is used in Global.asax `Application_Start()` like this: `BundleConfig.RegisterBundles(BundleTable.Bundles);` — Georg Patscheider, Jan 19 '17 at 09:35

score 32 · Accepted Answer · answered Jan 25 '17 at 12:40

32

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.

answered Jan 25 '17 at 12:40

JohnG79

1,485
1
17
23

1

This worked for me. I was adding a link created with `document.createElement("link")` and `setAttribute("rel", "stylesheet")` and the warning popped up in my developer tools. I'm still not sure why it would produce a warning like that for a dynamically generated link element. – Frank Aug 17 '17 at 12:23
20

When I remove this attribute, the file doesn't get downloaded anymore. It doesn't show in chrome's network tab... Any hint? – M.Parent Apr 20 '18 at 18:06
The answer from @hezi-yovel below sums it up, but check out https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel: "In this case, on and
, if the rel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links." Also, check out https://www.w3.org/TR/2014/REC-html5-20141028/links.html#link-type-stylesheet
– Alexei Danchenkov Feb 06 '21 at 23:17
Answer is destructive, to say the least. How come it is an accepted answer? NEVER remove `rel="stylesheet"` from css links. The issue is clearly on server side. – Сергей Гринько May 14 '21 at 15:31

score 7 · Answer 2 · answered Jan 09 '21 at 11:52

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.

score 4 · Answer 3 · answered Aug 13 '18 at 18:07

4

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.

answered Aug 13 '18 at 18:07

Jason Marsell

1,752
2
19
10

True, if this is not enabled that JS interpreter will encounter run-time errors and when you navigate to Developer Tools -> Sources and watch the console as the pages loads you will see the run-time error. – Andile Oct 03 '19 at 11:07

score 3 · Answer 4 · answered Dec 31 '18 at 15:59

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.

score 0 · Answer 5 · answered Jun 25 '19 at 18:47

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.

score 0 · Answer 6 · answered May 22 '20 at 19:48

0

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

answered May 22 '20 at 19:48

Sammrafi

399
4
8

score 0 · Answer 7 · answered Aug 10 '20 at 17:36

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".

score 0 · Answer 8 · answered Oct 05 '20 at 18:53

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.

score 0 · Answer 9 · answered Mar 05 '21 at 10:22

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.

score 0 · Answer 10 · answered May 23 '21 at 16:03

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" />

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

10 Answers10

Linked