Using requireJS with jquery-dependant library (responsiveIframe)

Question

I am having a lot of trouble wrapping my head around requireJS dependancy management. I've read the docs and all online resources plenty of times but I can't seem to get it working correctly.

End scenario: I have an embeddable widget that eventually will attach a responsive iFrame to a page. The outer page is assumed to have some version of jQuery, but to be safe I am including my own jQuery.

I am using a library called responsiveIframe, which depends on jQuery.

Basically, when I call $('#responsive-frame').responsiveIframe({xdomain: '*'}); from inside the require function, I get an undefined function error. When I change $ to jQuery it works because it is able to use the existing library on the page (not what I want).

Here is the code (assume paths all work):

require.config({
  baseUrl: 'http://localhost:4000/assets',
  paths: {
    'jquery': 'jquery-1.11.1.min',
    'responsiveIframe': 'jquery.responsiveiframe'
  },
  map: {
    '*': {'jquery': 'jquery-lc'},
    'jquery-lc': {'jquery': 'jquery'}
  }
});

require(['jquery', 'responsiveIframe'], function($) {
  $('#responsive-frame').responsiveIframe({
    xdomain: '*'
  });
});

I've tried using various shims like so:

  shim: {
    responsiveIframe: {
      init: function() {
        return this.responsiveIframe
      }
    }
  }
  ,
  shim: {
    'responsiveIframe': ['jquery']
  }
  ,
  shim: {
    'responsiveIframe': {
      'deps': 'jquery',
      'exports': 'ResponsiveIframe'
      'init': function() {
        return this.responsiveIframe.noConflict()
    }
  }

I feel like I'm missing something fundamental about requireJS. Any help would be greatly appreciated, please let me know if you need more information :)

edit

Also, wrapping my responsiveiframe.js lib in this:

define(['responsiveIframe', 'jquery'], function(ri, jQuery) {

Seems to work... but this seems 'hacky'.

edit #2

I was able to get this to work by wrapping the responsiveIframe lib like this:

define(['jquery'], function(jQuery) {

  //library code here

}

I was able to remove all shims:

require.config({
  baseUrl: 'http://localhost:4000/assets',
  paths: {
    jquery: 'jquery-1.11.1.min',
    responsiveIframe: 'jquery.responsiveiframe'
  },
  map: {
    '*': {'jquery': 'jquery-lc'},
    'jquery-lc': {'jquery': 'jquery'}
  }
});

... and call like so:

require(['jquery','responsiveIframe'], function($) {
  $('#responsive-frame').responsiveIframe({xdomain: '*'});
});

However, I am always a fan of doing things the 'right' way and modifying libraries rubs me the wrong way.

I feel like I should be able to use shim to properly apply this wrap code...

chrisg · Accepted Answer · 2014-07-16 01:35:59Z

1

The last shim you tried was close, but the values of deps should be an array rather than a string. Try:

shim: {
    'responsiveIframe': {
        deps: ['jquery']
    }
}

This is ensure jquery is loaded before the responseIframe script is loaded and run.

answered Jul 16, 2014 at 1:35

chrisg

1,1178 silver badges9 bronze badges

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

1 Comment

Matt Ogram Over a year ago

This was one of the problems with my code, but I had more problems than this I guess :(

ant_Ti · Accepted Answer · 2014-07-17 12:02:32Z

1

You should set shim like this:

shim: {
    'responsiveIframe': {
        deps: ['jquery'],
        exports: '$'
    }
}

And change your module definition to this

define(['responsiveIframe'], function($) {
    $('#responsive-frame').responsiveIframe({xdomain: '*'});
}

That should do the trick

UPD.

If exports returns different jquery then you should modify shim to this:

shim: {
    'responsiveIframe': {
        deps: ['jquery'],
        init: function(jquery) {
            return jquery;
        }
    }
}

edited Jul 17, 2014 at 12:02

answered Jul 16, 2014 at 9:39

ant_Ti

2,42518 silver badges14 bronze badges

2 Comments

Matt Ogram Over a year ago

This worked, except I changed the define to require.

Matt Ogram Over a year ago

Actually, I thought this worked but it did not... $ is referencing the wrong jQuery version (the one the initial page loaded, not requireJS). I will continue to investigate.

Collectives™ on Stack Overflow

Using requireJS with jquery-dependant library (responsiveIframe)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related