SignalR cannot read property 'chatterHub' undefined

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.