Adding RequireJS module that uses jquery on a page that already has jquery as a global

Question

I have an add-on to an application (call it appX) that allows users to create their own customizations using javascript, css and appX's webservices api.

Usually customizations are small and do not involve a lot of external libraries/plugins but when they do have external libs the typical users' library of choice is jQuery.

In the next version of appX they are using jQuery natively which I know is going to break some of the customizations.

So I have a need to modularize this situation. I have some other problems that are coming up and RequireJS seems like a good solution to these issues. I just need to figure out how to apply RequireJS properly for this situation

In my POC I'm loading require.js as follows:

<!--A bunch of other script including jQuery (but not require) are loaded already -->
<script type="text/javascript" src="/custom/js/require.js"></script>
<script type="text/javascript" src="/custom/js/dostuff.js"></script>

We'll call the jQuery loaded with appX jqueryx and the one I want to load jqueryp (p for private)

jQuery utilizes AMD and by default uses this definition internally:

define( "jquery", [], function () { return jQuery; } );

But in this case RequireJS is loaded AFTER jQuery (jqueryx) so there will be no default 'jquery' definition correct?

Some more background before I show you my problem... the file structure is like this:

appx
    /js:
        jqueryx.js
        other.js
appx
    /custom/js:
        jqueryp.js
        dostuff.js

Looking at the RequireJS api it seems that I should be doing something like this:

require.config({
    baseUrl : 'custom/js',
    paths : { 'jquery' : 'jqueryp'},
    map: {
      '*': { 'jquery': 'jquery-private' },
      'jquery-private': { 'jquery': 'jquery' }
   }
});

define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

require(['jquery'], function(jq){
    console.log(jq.fn.jquery);
});

But when I do this I get an error:

Mismatched anonymous define() module: function (jq)...

I've played around with switching references to jquery, jquery-private as it's kind of confusing but with no progress.

How should I be applying RequireJS to this situation?

possible duplicate of RequireJS - Isolating jQuery versions and plugins within contexts — Paul Sweatte
– Paul Sweatte, Commented Sep 22, 2014 at 23:41

smilock · Accepted Answer · 2014-10-02 15:02:21Z

1

Almost a year late but better than no answer at all...

The following part should be moved into a "jquery-private.js" file:

define(['jquery'], function (jq) {
    return jq.noConflict( true );
});

You can't define a module in your main entry point. Even if you could, the module has no name so how would you reference it?

answered Oct 2, 2014 at 15:02

smilock

111 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding RequireJS module that uses jquery on a page that already has jquery as a global

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related