RequireJS + Waypoints : Object [object Object] has no method 'waypoint'

Question

I can't use waypoints with RequireJS although everything looks good. Here is my code: http://jsfiddle.net/7nGzj/

main.js

requirejs.config({
    "baseUrl": "theme/PereOlive/js/lib",
    "paths": {
      "app":"../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min"
    },
    "shim": {
        "waypoints.min": ["jquery"]
    }
});
requirejs(["app/common"]);

common.js

define([
    'jquery',
    "waypoints.min",
], function () {
    $(function () {
        console.log($.waypoints);
        $('#loading').waypoint(function (direction) {
            // do stuff
        });
    });
});

I even shimed it to be sure jQuery is properly loaded but it doesn't work. My other libraries works like they should (responsiveslides, flexslider, hoverintent, smoothscroll, ..).

• jQuery V1.10.2
• Waypoints V2.0.3
• RequireJS V2.1.8

Answer 1

Dependencies which are AMD-compliant (and Waypoints is) should be required via their registered module name. The easiest (only?) way to find out what that name is is to look into the lib's source code:

// (...)
if (typeof define === 'function' && define.amd) {
  return define('waypoints', ['jquery'], function($) {
    return factory($, root);
  });
} // (...)

It's "waypoints"!

Since the library is AMD-compatibile, you don't need a shim but you'll need to define the path to it (since the file name can be different than the AMD module name):

requirejs.config({
    "baseUrl": "theme/PereOlive/js/lib",
    "paths": {
      "app": "../app",
      "waypoints": "path/to/waypoints.min"
    }
});

After doing that, you'll need to change you require call:

define([
    "jquery",
    "waypoints" // this is the AMD module name
]

---

Fixed your jsfiddle: http://jsfiddle.net/jVdSk/2/