Using Twitter Bootstrap with requireJS - undefined is not a function`

Question

After doing some reading of the following question I wrapped my compiled bootstrap JS plugin file in an AMD module like so:

define(['zepto'], function($){ ...Bootstrap pasted here... });

Then this is what my main.js file looks like for config:

require.config({
    baseUrl: 'js',
    paths: {
        'zepto': 'lib/zepto',
        'underscore': 'lib/underscore',
        'backbone': 'lib/backbone',
        'text': 'lib/text',
        'bootstrap': 'lib/bootstrap'
    },
    shim: {
        'zepto': {
            exports: '$'
        },
        'underscore': {
            exports: '_'
        },
        'backbone': {
            deps: ['zepto', 'underscore'],
            exports: 'Backbone'
        }
    }
});
require([
    'app',
    'zepto',
    'underscore',
    'backbone',
    'bootstrap'
    ],
    function(App){
        //start the app
        App.initialize();
});

But in the console i am getting the following error in the bootstrap.js file:

Uncaught TypeError: undefined is not a function

It seems $ is not defined even though it is being passed into the module. The full wrapped bootstrap module is available here.

Am using zepto which is supposed to be compatible with Bootstrap and am exporting $ from the shim so cannot see why this is not working for me.

RyanP13 · Accepted Answer · 2013-04-10 03:09:45Z

1

I fixed this by adding the following lines of code in the bootstrap JS file.

Where window.jQuery is passed into the functions modified this to include the Zepto global object also like so window.jQuery || window.Zepto

More information here:

Zepto with Bootstrap

edited Apr 10, 2013 at 3:09

answered Apr 10, 2013 at 2:50

RyanP13

7,79328 gold badges102 silver badges172 bronze badges

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

Comments

Limin · Accepted Answer · 2013-05-29 22:03:32Z

1

Since you have define(['zepto'], function($){ ...Bootstrap pasted here... });, you can just replace all window.jQuery in the function invoke call with $.

answered May 29, 2013 at 22:03

Limin

1,9271 gold badge11 silver badges3 bronze badges

Comments

Mike Wrather · Accepted Answer · 2013-06-21 19:42:09Z

1

I just had this same problem. I added a shim for bootsrap and it seems to work now. This would be in addition to your other shims.

shim: {
    'bootstrap': {
        deps: ['zepto']
    },
},

answered Jun 21, 2013 at 19:42

Mike Wrather

1467 bronze badges

Comments

Andy Polhill · Accepted Answer · 2013-11-12 10:02:24Z

0

If you don't want to edit the bootstrap JS file, it might be worth considering this shim, it should set the jQuery object before bootstrap loads.

  'zepto': {
    exports: '$',
    init: function() {
      window.jQuery = $;
    }
  }

answered Nov 12, 2013 at 10:02

Andy Polhill

7,4282 gold badges26 silver badges20 bronze badges

Collectives™ on Stack Overflow

Using Twitter Bootstrap with requireJS - undefined is not a function`

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related