JQuery - works locally but $ is not defined but only on deployed site

Question

Built a site in MVC, including jQuery in the layout file like this:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Scripts.Render("~/bundles/jquery")
    @Styles.Render("~/Content/css")
</head>
<body>
    <!-- content -->
</body>
</html>

JQuery is referenced via nuget and bundled like this:

public class BundleConfig
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-ui.min.js",
            "~/Scripts/stickyfill.js"));
}

And that works fine running the site locally in Visual Studio.

When I deploy to IIS and try to run the site I get the dreaded Uncaught ReferenceError: jQuery is not defined error.

The first thing I checked was that the jQuery package was available via the address the deployed page was trying to use:

/bundles/jquery?v=[a token]

Which it is. You can even see it referenced in the bundles from Chrome Developer tools. It may be worth noting that the css, which is deployed via the same mechanism with a token, works fine.

I've also worked my way down the answers to the question JQuery - $ is not defined and either eliminted or tried them, to no avail.

The only thing I can think of is that it's not loading before the initial call to jQuery(document).ready() - which is why I moved the bundle into the <head> tag. But that doesn't help, and I don't know what else I can do to slow or wait for page load.

What on earth else could this be?

EDIT: Somone asked for the head of the rendered page:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[the title]</title>
    <script src="/bundles/jquery?v=[a token]"></script>
    <link href="/Content/css?v=[a token]" rel="stylesheet"/>
</head>

can you post the `HTML` of the `generated` page, at least the head? — imvain2, May 13 '16 at 15:32
So what does the Network panel say when it loads the jQuery file? — epascarello, May 13 '16 at 15:35
@epascarello First loads at the IP. Next load is jQuery file, which takes 84ms (mostly wait from the server - it's a test server and very slow) and comes through green, status 200. — Bob Tway, May 13 '16 at 15:40
@epascarello well, it starts with (function(n){"function"==typeof define&&define.amd?define(["jquery"],n):n(jQuery)}) ... so I guess so? — Bob Tway, May 13 '16 at 15:45
@epascarello Hmm. Reading the script at https://code.jquery.com/jquery-2.2.3.min.js suggests the code may be different — Bob Tway, May 13 '16 at 15:47
@epascarello Heh, no. It's because I'm fiddling with the code. — Bob Tway, May 13 '16 at 15:49
@epascarello It's something to do with the bundle. Referencing https://code.jquery.com/jquery-2.2.3.min.js directly fixes the issue. Will have to investigate further, thanks — Bob Tway, May 13 '16 at 16:00

score 1 · Answer 1 · answered May 13 '16 at 15:32

1

try this :

public class BundleConfig
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-1.8.2.min.js",
            "~/Scripts/jquery-ui.min.js",
            "~/Scripts/stickyfill.js"));
}

answered May 13 '16 at 15:32

Wasif Shahjahan

326
1
8

Thanks for the suggestion, but it's not helped. – Bob Tway May 13 '16 at 15:45
I think you are using jquery twice in your page. – Wasif Shahjahan May 13 '16 at 15:51

JQuery - works locally but $ is not defined but only on deployed site

1 Answers1