doesn't work with default jquery + require.js setup #150

Closed
azhang opened this Issue Nov 20, 2013 · 4 comments

Projects

None yet

2 participants

@azhang

timeago assumes jquery is in noconflict mode, so it doesn't work when $ is global. However, the documentation for requirejs with jquery has jquery loaded in a global $. Hence, in

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function ($) {

the function($) will override the global $ in this scope. Thus, $.timeago not accessible through the global $.

As a quick fix, I've replaced that with function() locally:

(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    // Browser globals
    factory(jQuery);
  }
}(function () {

and now it loads perfectly.

I'll try to look into ways other projects deal with this and follow up.

@rmm5t
Owner

@aaronz8 You've lost me here a bit...probably because I don't use require.js, because I don't think it solves a real problem that apps using timeago should run into. But I digress.

timeago assumes jquery is in noconflict mode

No it doesn't. It is just built to work with noconflict mode if it's enabled. It doesn't/shouldn't require it.

However, the documentation for requirejs with jquery has jquery loaded in a global $.

What documentation?

Thus, $.timeago not accessible through the global $.

This is where I'm confused. The global jQuery is passed (assigned) as the local $ to keep things in scope, thus both $.timeago and jQuery.timeago should be available to the outer scope if in "conflict" mode.

Please also review the UMD (Universal Module Definition) patterns for JavaScript, specifically the jqueryPlugin snippet. Are you saying these are wrong?

@azhang

I'm kind of agreeing with you here, after spending the week trying to get requirejs and AMD to work with jquery it's not very useful.

Anyways, I'm referring to the requirejs documentation at http://www.requirejs.org/docs/jquery.html. Under Global Functions, it states that by default, jquery is loaded globally without noconflict mode. Hence, any module loaded by requirejs needing to use jquery loads it like the following:

require(['jquery'], function( ) {
    console.log( $ ) // jquery is loaded
});

In contrast, when noconflict mode is on,

require(['jquery'], function( ) {
    console.log( $ ) // undefined
});

and

require(['jquery'], function($) {
    console.log( $ ) // jquery is loaded
});

Without noconflict, it seems that if you do the following, it creates another jquery instance in which timeago is attached. Once it returns, it's not accessible anymore.

require(['jquery'], function($) {
    console.log( $ ) // jquery is loaded
});

I should say that I haven't used requirejs very much, so I might be getting things totally wrong. I'm also beginning to think that this is a jquery issue or an issue with how I'm setting up jquery in requirejs.

Thanks for your help!

@rmm5t
Owner

@aaronz8 I'm really not that vested in the require.js support. This was all added as part of #108. Please review that pull-request, and the UMD (Universal Module Definition) patterns for JavaScript, specifically the jqueryPlugin snippet.

I don't think a change is necessary (but I'm not certain), and I think the original change you suggested actually just uses the global '$' variable which would break when noconflict mode is actually turned on.

@azhang

Yea. I'm not sure - jquery has thoroughly confused me with it's custom AMD since it breaks the standard by loading into the global. I have seen mention of the UMD repo having some errors, but at this point requirejs is looking less and less like something I want to use. I'm going to close this issue because if anything, I think it's a jquery/requirejs issue and not a timeago issue.

Thanks so much!

@azhang azhang closed this Nov 22, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment