Unable to resolve _ in a Backbone & RequireJS app

Question

I'm relatively new to Backbone and RequireJS, so please bear with me. I'm getting an error when I do the following in my collection: _.range(0,10) . It's giving me this error:

Uncaught TypeError: Cannot call method 'range' of undefined

Somehow the "_" is not getting resolved when my Collection is loaded. Here's my collection below:

define([
  'jquery',
  'underscore',
  'backbone',
  'collections/feed',
  'text!/static/templates/shared/display_item.html'
], function($, _, Backbone, FeedCollection, DisplayItem){
  debugger;   // Added this to test the value of _
  var FeedView = Backbone.View.extend({
    el: '#below-nav',
    initialize: function () {
      this.feedCollection = new FeedCollection();
    },
    feed_row: '<div class="feed-row row">',
    feed_span8: '<div class="feed-column-wide span8">',
    feed_span4: '<div class="feed-column span4">',
    render: function () {
      this.loadResults();
    },
    loadResults: function () {
      var that = this;
      // we are starting a new load of results so set isLoading to true
      this.isLoading = true;


      this.feedCollection.fetch({
        success: function (articles) {
          var display_items = [];

          // This line below is the problem...._ is undefined
          var index_list = _.range(0, articles.length, 3);

          _.each(articles, function(article, index, list) {
            if(_.contain(index_list, index)) {
              var $feed_row = $(that.feed_row),
                    $feed_span8 = $(that.feed_span8),
                    $feed_span4 = $(that.feed_span4);

              $feed_span8.append(_.template(DisplayItem, {article: articles[index]}));
              $feed_span4.append(_.template(DisplayItem, {article: articles[index+1]}));
              $feed_span4.append(_.template(DisplayItem, {article: articles[index+2]}));
              $feed_row.append($feed_span8, $feed_span4);
              $(that.el).append($feed_row);
            }
          });
        }
      });
    }
  });
  return FeedView;
});

I added the debugger line so that I could test the values of all the arguments. Everything loaded fine, except for _. Could this be something wrong with my config.js file?

require.config({

  // Set base url for paths to reference
  baseUrl: 'static/js',

  // Initialize the application with the main application file.
  deps: ['main'],
  paths: {
    jquery: 'libs/jquery/jquery.min',
    require: 'libs/require/require.min',
    bootstrap: 'libs/bootstrap/bootstrap.min',
    text: 'libs/plugins/text',
    underscore: 'libs/underscore/underscore',
    backbone: 'libs/backbone/backbone',
    json: 'libs/json/json2',
    base: 'libs/base/base'
  },
  shim: {
    'backbone': {
      // These script dependencies should be loaded first before loading
      // backbone
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'bootstrap': {
      deps: ['jquery'],
      exports: 'Bootstrap'
    }
  }
})

Your help is greatly appreciated. My head is spinning as a result of this error.

Answer 1

Based off the project that I'm working on, you need a shim for underscore as well. Underscore isn't 'exported' per say, so use this instead:

shim: {
    'backbone': {
      // These script dependencies should be loaded first before loading
      // backbone
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    'bootstrap': {
      deps: ['jquery'],
      exports: 'Bootstrap'
    },
    'underscore': {
      exports: '_'
    }
  }

Seems this might also be 'duplicate' question of Loading Backbone and Underscore using RequireJS - one or two of the answers down the list there is a mention of this setup.