Chrome says “Resource interpreted as script but transferred with MIME type text/plain.”, what gives?

It means that the server is sending an Javascript HTTP response with content-type:text/plain.

You should configure the server to send the Javascript responses with content-type:application/x-javascript.

This has nothing to do with jQuery or any quirk of client-side script code. It is a server-side issue: The server(-side application) is not sending the expected HTTP Content-Type header field value for the client-side script resource. This happens if the Web server is insufficiently configured, misconfigured, or a server-side application (e. g., PHP) is generating the client-side script resource.

Proper MIME media types for ECMAScript implementations like JavaScript include:

• text/javascript (registered as obsolete, not deprecated; but still valid, and supported best)
• text/ecmascript (registered as obsolete, not deprecated; but still valid)
• application/javascript
• application/ecmascript

They do not include application/x-javascript, as the MIME media types listed above are the ones registered in the standards tree by now (so there is no need, and there should be no want, to use experimental ones anymore). Cf. RFC 4329, "Scripting Media Types" (2005 CE) and my Test Case: Support for Scripting Media Types.

One solution is to configure the server if possible, as already recommended. For Apache, this can be as simple as adding the directive

AddType text/javascript .js

(see the Apache HTTP Server documentation for details).

But if the client-side script resource is generated by a server-side application, like PHP, then it is necessary to set the Content-Type header field value explicitly, as the default is likely text/html:

<?php
  header('Content-Type: text/javascript; charset=UTF-8');
  // ...
?>

(That and similar statements must come before any other output – see the PHP manual –, else the HTTP message body is considered to have begun already and it is too late to send more header fields.)

Server-side generation can happen easily to a client-side script resource even if you have plain .js files on the server, if comments are removed from them as they are served, if they are all packed into one large response (to reduce the number of requests, which is more efficient), or they are minimized by the server-side application in any other way.

1) Make sure your weblogic.xml file is free of errors

like this one:

    <?xml version = '1.0' encoding = 'windows-1252'?>
<weblogic-web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:schemaLocation="http://www.bea.com/ns/weblogic/weblogic-web-app http://www.bea.com/ns/weblogic/weblogic-web-app/1.0/weblogic-web-app.xsd"
                  xmlns="http://www.bea.com/ns/weblogic/weblogic-web-app">
    <container-descriptor>
        <prefer-web-inf-classes>true</prefer-web-inf-classes>
    </container-descriptor>
    <context-root>MyWebApp</context-root>
</weblogic-web-app>

2) Add a mime type for javascript to your web.xml file:

    ...
        </servlet-mapping>

        <mime-mapping>    
            <extension>js</extension>        
            <mime-type>application/javascript</mime-type>        
        </mime-mapping>

        <welcome-file-list>
    ...

application/javascript is currently the only valid mime-type; others like text/javascript have been deprecated

3) You may need to clear up your browser cache or hit CTRL-F5

FYI I get the same error on any page that loads Google Analytics. I've been ignoring it -- I didn't think it was a big deal.

I was having the same issue when trying to change a background images in a array through javascript (jQuery in this case).

Anyway.

Instead of this:

m.setStyle('background-image','url(/templates/site/images/style5/'+backgs[i]+')')

do this:

eval("m.setStyle('background-image','url(/templates/site/images/style5/'+backgs[i]+')')");

Chrome javascript gets screwed when trying to parse a variable inside an element structured with ' . In my case it stopped just before the image array being inserted. Instead of parsing the image url + image name (inside the array), it was parsing just the image url.

You probably need to search inside the code and see where it happens. FF, IE and all other don't have this problem.

I had this problem and I figured out how to fix it.

It happens when the style (CSS) file is in a different encoding from the PHP file that references the .css file

For example, using jQuery.js in Unix encoding and using index.php in UTF-8 will cause this problem so you have to make them both UTF-8 or any other encoding as long as it the same.

PHP at the top of your script->

//Add the JS Header:
header("content-type:application/x-javascript");

In your apache's httpd.conf, just add such a line:

AddType application/x-javascript .js