Using Bootstrap 3.0 with Browserify

Question

I am trying to use Bootstrap 3.0 with Browserify 5.9.1, but getting the following error:

Uncaught ReferenceError: jQuery is not defined

What's the correct way to do this?

Here are the relavant portions of my package.json:

{
  ...
  "scripts": {
    "bundle": "browserify main.js -o bundle.js --debug --list"
  },
  "dependencies": {
    "backbone": "~1.1.x",
    "jquery": "~2.1.x",
    "underscore": "~1.6.x"
  },
  "devDependencies": {
    "browserify": "^5.9.1",
    ...
  },
  ...
}

The module that requires bootstrap is shown below:

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

Two things that I don't like here are:

1. Bootstrap is downloaded using Bower. AFAIK there is no way to get it using npm. This makes the path very long and awkward. Is there a way to make Bootstrap npm friendly?
2. Bootstrap is not a direct dependency of this module, it is sort of a jQuery plugin. When it is loaded, it simply creates some event handlers on the document to handle events from Bootstarp's widgets. I have to require just so that these event handlers are created. Is this the right way?

Of course after all this, I still get the "jQuery is not defined" error. I am pulling my hair out trying to get this to work. Please help!

P.S. Earlier I had the grunt-browserify plugin in the picture and quickly realized that it was using browserify version 4.x with no source map capability. This was making it even harder to debug, so I quickly took it out of the picture and running browserify straight from npm.

Answer 1

This works for me when I'm using bootstrap in browserify:

window.$ = window.jQuery = require('jquery')
var Backbone = require('backbone');
Backbone.$ = $;
require('../../../../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap');

Answer 2

I ran into the same problem: Bootstrap is available in NPM but is not exposed as a Common JS module. The approach I settled on was:

1. Temporarily set window.$ and window.jQuery
2. Load Bootstrap.js by requiring it
3. Revert the value of window.$ and window.jQuery

I placed the code below into a module called bootstrapHack.js and required it at the root of my app before anything else runs.

var jQuery = require('jquery');
window.$ = window.jQuery = jQuery;

require('bootstrap');

jQuery.noConflict(true);

Or if you're only working with one or two Bootstrap components, you can require them individually and cut down on the file size. In this case, just modal and tooltip.

var jQuery = require('jquery');
window.$ = window.jQuery = jQuery;

require('bootstrap/js/tooltip');
require('bootstrap/js/modal');

jQuery.noConflict(true);

Answer 3

A cleaner approach would be to use the atomify plugin. That would help you resolve jQuery, bootstrap.js and bootstrap.css all from npm module.

var gulp = require('gulp');
var atomify = require('atomify');

gulp.task('default', function () {
  atomify.css('less/main.less', 'dist/bundle.css');
  atomify.js('js/index.js', 'dist/bundle.js');
});

You need to @import bootstrap in to your less / css file,

@import 'bootstrap';
@import './other.less';

@dark : #999;

body {
  background-color : @dark;
}

as well as require() bootstrap in your js file,

var $ = jQuery = require('jQuery')
require('bootstrap');
var other = require('./other')

console.log(typeof $().modal);
console.log(other());

module.exports = function() {
  console.log('Executed function xyz');
}

A complete example in this Github repo.