Can't use requirejs

Question

I'm newby in require.js.
I have next trouble. I linked require.js :

<script data-main="/Scripts/page/main" src="/Scripts/framework/require.js"></script>

code main.js

require.config(
{
    shim: {
        backbone: {
            exports: 'backbone'
        }
    },paths: {
    jquery: "/Scripts/framework/jquery/jquery-1.6.4",
    underscore: "/Scripts/framework/underscore/underscore",
    backbone: "/Scripts/framework/backbone/backbone"
}
});
require(["jquery"], function (jquery) {
// why jquery is undefined?
})

I tried to use it like in manual, but unfortunately it's doesnt work. Why in require function jquery variable is undefined? Thanks for any help.

Answer 1

The problem is that your baseUrl, where requireJs will load the script from, is the one you specify in the data-main attribute. From the docs:

If no baseUrl is explicitly set in the configuration, the default value will be the location of the HTML page that loads require.js. If a data-main attribute is used, that path will become the baseUrl.

According to this, your paths need to look like this:

require.config({
  shim: {
    backbone: {
      exports: 'backbone'
    }
  },
  paths: {
    jquery: "../Scripts/framework/jquery/jquery-1.6.4",
    underscore: "../Scripts/framework/underscore/underscore",
    backbone: "../Scripts/framework/backbone/backbone"
  }

You could also set the baseUrl to the root of your project like this:

require.config({
  baseUrl: "./",
  shim: {
    backbone: {
      exports: 'backbone'
    }
  },
  paths: {
    jquery: "Scripts/framework/jquery/jquery-1.6.4",
    underscore: "Scripts/framework/underscore/underscore",
    backbone: "Scripts/framework/backbone/backbone"
  }

Answer 2

I just ran through the same problem.

Im also new in it but I found a good solution explained here Loading Backbone and Underscore using RequireJS

Basically is extend the shim to:

requirejs.config({

    baseUrl: 'js/lib', 

    shim: {
        underscore: {
            exports: '_'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'backbone'
        }
    },  

    paths: {
        app: '../app',
        jquery: 'jquery-1.10.2.min',
        backbone: 'backbone.min',
        underscore: 'underscore.min'
    }   
});

requirejs(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {  
    console.log('here');
});

Seems underscore _ and backbone depending on both jquery and underscore cause this.

It works for me and makes sense.

Please correct me If it doesnt.