0

I'm trying to use require.js for the first time, however I'm getting the error:

Uncaught TypeError: Property '$' of object # is not a function.

 require.config({
      shim: {

       "jquery": {
            exports: '$'
        },

        underscore: {
          exports: '_'
        },
        backbone: {
          deps: ['underscore', 'jquery'],
          exports: 'Backbone'
        }
      },
      paths: {
        jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
        underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min',
        backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min',
        templates: '/referralgenie/templates/'
      }

    });

    require([
      'app'
    ], function(App){
      App.initialize();
    });

It states the error is in backbone.js so I'm finding it hard to debug.

The error comes from the line here:

Backbone.history.start();

In my Router file:

// Filename: router.js
define([
  'jquery',
  'underscore',
  'backbone',
  'views/CampaginView',
  'views/RewardView',
  'views/FriendRewardView',
  'views/ParticipantView'
], function($, _, Backbone, CampaginView, RewardView, FriendRewardView, ParticipantView) {


   var AppRouter = Backbone.Router.extend({
           routes: {
               ':id': 'portal-home' // matches http://example.com/#anything-here
           }
    });


  var initialize = function(){

    var app_router = new AppRouter;

    app_router.on('route:portal-home',function(id) {
      var campaignView = new CampaginView();
      campaignView.render({id: id});
    });




    Backbone.history.start();
  };
  return {
    initialize: initialize
  };
});
Prometheus
  • 32,405
  • 54
  • 166
  • 302
  • can you post the stack trace of the type error and the version number of backbone you are using? You *might* have to do `jquery: { exports: '$' }` in your shim, just like you did for underscore. – Matt Wonlaw Nov 11 '13 at 00:04
  • the version numbers are in the urls above in the code. this is the version I'm using. I have tried export of $ but that did not work, updated code above to reflect new code. – Prometheus Nov 11 '13 at 00:10
  • jQuery from at least 1.9.1 onwards does not need shimming when used with RequireJS. – Louis Nov 11 '13 at 00:11
  • @Louis-DominiqueDubeau thats good to know, I won't use it on from now on. backbone does however and I still have the same issue :( From what I have been reading it could be to do with the way backbone uses this.$! Unsure how to fix, why has no one else had this issue! – Prometheus Nov 11 '13 at 00:17
  • @Spike can you check the value of ``Backbone.$`` either by dumping it to the console or using a debugger. – Louis Nov 11 '13 at 00:18
  • @Louis-DominiqueDubeau Backbone.$ is undefined! :( – Prometheus Nov 11 '13 at 00:27
  • 1
    In the main entry point to your app also require jQuery. `require([ 'app', 'jquery' ], function(App, $){ App.initialize(); });` It doesn't seem like you should need to do this but I had a similar problem before that this fixed. – Matt Wonlaw Nov 11 '13 at 00:38
  • Underscore has a dependency on jquery, so try using 'underscore : { deps : ['jquery'], exports : '_' }' in the shim. – Sujata Chanda Nov 11 '13 at 10:13

1 Answers1

2

This is a hunch based on this SO question/answer and based on reading the code of Backbone.js.

I think Backbone is having trouble finding jQuery so you'll have to set it yourself. Try to do it by using a shim with an init function for Backbone:

    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone',
      init: function (_, $) { Backbone.$ = $; return Backbone; }
    }
Community
  • 1
  • 1
Louis
  • 146,715
  • 28
  • 274
  • 320