Why are my js files being interpreted as stylesheets?

Question

I want to use ASP.Net Bundling but I ran into this error with js files:

Resource interpreted as Stylesheet but transferred with MIME type application/x-javascript: "http://localhost:54148/resources/js/jquery.js".
Resource interpreted as Stylesheet but transferred with MIME type application/x-javascript: "http://localhost:54148/resources/js/bootstrap.js".

this is my Bundle.Config:

<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
  <styleBundle path="~/css">
    <include path="~/resources/css/*.css" />
  </styleBundle>
  <scriptBundle path="~/js">
    <include path="~/resources/js/jquery.js" />
    <include path="~/resources/js/bootstrap.js" />
  </scriptBundle>
</bundles>

and I have this in my master:

<webopt:BundleReference ID="brCss" runat="server" Path="~/css"></webopt:BundleReference>
<webopt:BundleReference ID="brJs" runat="server" Path="~/js"></webopt:BundleReference>

When open chrome web developer tools I can see that the rendered html looks like this:

<link href="/resources/js/jquery.js" rel="stylesheet"/>
<link href="/resources/js/bootstrap.js" rel="stylesheet"/>