SignalR cannot read property 'chatterHub' undefined - asp.net-mvc-4

Question

My little chat project is barking at me "Uncaught TypeError: Cannot read property 'chatterHub' of undefined"
I must have something out of order. I checked in Chrome inspector the signalr/hubs defines 'chatterHub'. Below is signalr/hubs. (is it generated? if yes, by what and when?)
/*!
* ASP.NET SignalR JavaScript Library v2.0.1
* http://signalr.net/
*
* Copyright Microsoft Open Technologies, Inc. All rights reserved.
* Licensed under the Apache 2.0
* https://github.com/SignalR/SignalR/blob/master/LICENSE.md
*
*/
/// <reference path="..\..\SignalR.Client.JS\Scripts\jquery-1.6.4.js" />
/// <reference path="jquery.signalR.js" />
(function ($, window, undefined) {
/// <param name="$" type="jQuery" />
"use strict";
if (typeof ($.signalR) !== "function") {
throw new Error("SignalR: SignalR is not loaded. Please ensure jquery.signalR-x.js is referenced before ~/signalr/js.");
}
var signalR = $.signalR;
function makeProxyCallback(hub, callback) {
return function () {
// Call the client hub method
callback.apply(hub, $.makeArray(arguments));
};
}
function registerHubProxies(instance, shouldSubscribe) {
var key, hub, memberKey, memberValue, subscriptionMethod;
for (key in instance) {
if (instance.hasOwnProperty(key)) {
hub = instance[key];
if (!(hub.hubName)) {
// Not a client hub
continue;
}
if (shouldSubscribe) {
// We want to subscribe to the hub events
subscriptionMethod = hub.on;
} else {
// We want to unsubscribe from the hub events
subscriptionMethod = hub.off;
}
// Loop through all members on the hub and find client hub functions to subscribe/unsubscribe
for (memberKey in hub.client) {
if (hub.client.hasOwnProperty(memberKey)) {
memberValue = hub.client[memberKey];
if (!$.isFunction(memberValue)) {
// Not a client hub function
continue;
}
subscriptionMethod.call(hub, memberKey, makeProxyCallback(hub, memberValue));
}
}
}
}
}
$.hubConnection.prototype.createHubProxies = function () {
var proxies = {};
this.starting(function () {
// Register the hub proxies as subscribed
// (instance, shouldSubscribe)
registerHubProxies(proxies, true);
this._registerSubscribedHubs();
}).disconnected(function () {
// Unsubscribe all hub proxies when we "disconnect". This is to ensure that we do not re-add functional call backs.
// (instance, shouldSubscribe)
registerHubProxies(proxies, false);
});
proxies.chatterHub = this.createHubProxy('chatterHub');
proxies.chatterHub.client = { };
proxies.chatterHub.server = {
send: function (name, message) {
return proxies.chatterHub.invoke.apply(proxies.chatterHub, $.merge(["Send"], $.makeArray(arguments)));
}
};
proxies.products = this.createHubProxy('products');
proxies.products.client = { };
proxies.products.server = {
add: function (newProduct) {
return proxies.products.invoke.apply(proxies.products, $.merge(["Add"], $.makeArray(arguments)));
},
getAll: function () {
return proxies.products.invoke.apply(proxies.products, $.merge(["GetAll"], $.makeArray(arguments)));
},
remove: function (ProductId) {
return proxies.products.invoke.apply(proxies.products, $.merge(["Remove"], $.makeArray(arguments)));
},
update: function (updatedProduct) {
return proxies.products.invoke.apply(proxies.products, $.merge(["Update"], $.makeArray(arguments)));
}
};
return proxies;
};
signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
$.extend(signalR, signalR.hub.createHubProxies());
}(window.jQuery, window));
And here is Chatter.cshtml
#{
ViewBag.Title = "Chatter";
}
<h2>Welcome #ViewBag.UserName!</h2>
<div id="container">
<input type="text" id="message" />
<input type="button" id="sendMessage" value="Send " />
<input type="hidden" id="displayName" />
<ul id="discussion"> </ul>
</div>
#section Scripts {
#Scripts.Render("~/bundles/signalr")
<script src="/Scripts/jquery.signalR-2.0.1.min.js" type="text/javascript"></script>
<script src="~/signalr/hubs" type="text/javascript"></script>
<script src="/Scripts/jquery-2.0.3.min.js"></script>
<script>
$(function () {
// the client proxy object chat takes all the work communicating to the server
var chat = $.connection.chatterHub; // client proxy object starts lowercase. The server Class starts uppercase
// dynamically defines function addNewMessageToPage that corresponding to the one defined in the ChatterHub on server side
// this is what the server is to call to send messages to each clients
chat.client.addNewMessageToPage = function (name,message) {
$("#discussion").append("<li>" + (new Date).toString("HH:mm:ss") + "<strong>" + htmlEncode(name) + "</strong>" + htmlEncode(message) + "</li>");
};
$("#displayName").val('#ViewBag.UserName');
$("#message").focus();
// a ready function for SignalR
$.connection.hub.start().done(function () {
// click event to send username and message to the server and all clients
$("#sendMessage").click(function () {
chat.server.send($("#displayName").val(), $("#message").val());
$("#message").focus();
});
});
$("#message").keypress(function (event) {
if (event.which === 13) $("#sendMessage").click();
});
});
function htmlEncode(value) {
var encodedValue = $("<div />").text(value).html();
return encodedValue;
}
</script>
}
Can anyone tell what is missing or out of order?
Thanks,

Answer 1

I found it. the page source shown in Chrome inspector like this
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery-ui-1.10.3.js"></script>
<script src="/Scripts/jquery.signalR-2.0.1.min.js" type="text/javascript"></script>
<script src="/signalr/hubs" type="text/javascript"></script>
<script src="/Scripts/jquery-2.0.3.min.js"></script>
<script>
$(function () {
// the client proxy object chat takes all the work communicating to the server
var chat = $.hubConnection.chatterHub; // client proxy object starts lowercase. The server Class starts uppercase
Obviously jquery-2.0.3 was loaded twice. I removed
<script src="/Scripts/jquery-2.0.3.min.js"></script>
and it worked.