37

There are many similar questions including answers here on stack overflow, but none of them have worked for me, so here I am asking you guys. I appreciate everyone's time.

I recently started using gulp with browserify, and that works great. I then tried to use browserify for the front-end using: Backbone and Bootstrap3.

things are appearing to work, until I try to require the js file that comes with Bootstrap. I get an error in my chrome tools stating: jQuery is undefined.

I have attempted to shim it in, but I am very confused by the shim. I am using jQuery 2.1.1, so I should not need to shim jQuery, but it exists in the shim now, as I was desperate and trying everything. Here is my package.json and my main.js file:

--------------package.json------------------

{
  "name": "gulp-backbone",
  "version": "0.0.0",
  "description": "Gulp Backbone Bootstrap",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Rob Luton",
  "license": "ISC",


  "devDependencies": {
    "jquery": "^2.1.1",
    "backbone": "^1.1.2",
    "browserify": "^4.2.1",
    "gulp": "^3.8.6",
    "vinyl-source-stream": "^0.1.1",
    "gulp-sass": "^0.7.2",
    "gulp-connect": "^2.0.6",
    "bootstrap-sass": "^3.2.0",
    "browserify-shim": "^3.6.0"
  },

  "browser": {
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js",
    "jQuery": "./node_modules/jquery/dist/jquery.min.js"
  },

  "browserify": {
    "transform": ["browserify-shim"]
  },

  "browserify-shim": {
    "jquery": "global:jQuery", 
    "bootstrap": {
      "depends": [
        "jQuery"
      ]
    }
  }
}

------------------------- main.js ----------------------

var shim = require('browserify-shim');
$ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
var bootstrap = require('bootstrap');

/* the following logs fine if I comment out the bootstrap require, otherwise I get 'jQuery undefined' */

console.log(Backbone);
$(function() {
    alert('jquery works');
});
rob.luton
  • 395
  • 1
  • 4
  • 7
  • You might be interested in the Bootstrap UMD scaffolding that was removed in https://github.com/twbs/bootstrap/pull/13904 – cvrebert Jul 19 '14 at 01:24
  • see my answer in http://stackoverflow.com/questions/24978244/using-bootstrap-3-0-with-browserify/24981030 if you don't want to use browserify-shim – Ian Lim Aug 06 '14 at 00:08

4 Answers4

52

You shouldn't need to shim jquery that way if you've installed it with npm. The following works for a project I've been writing:

I've also learned that using npm for bootstrap is kind of a PITA. I've been using bower to install and maintain certain front-end components when they need to be shimmed like this.

package.json:

{
  "name": "...",
  "version": "0.0.1",
  "description": "...",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "browser": {
    "d3js": "./bower_components/d3/d3.min.js",
    "select2": "./bower_components/select2/select2.min.js",
    "nvd3js": "./bower_components/nvd3/nv.d3.min.js",
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim",
      "hbsfy"
    ]
  },
  "browserify-shim": {
    "d3js": {
      "exports": "d3",
      "depends": [
        "jquery:$"
      ]
    },
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "select2": {
      "exports": null,
      "depends": [
        "jquery:$"
      ]
    },
    "nvd3js": {
      "exports": "nv",
      "depends": [
        "jquery:$",
        "d3js:d3"
      ]
    }
  },
  "devDependencies": {
    "browserify-shim": "~3.4.1",
    "browserify": "~3.36.0",
    "coffeeify": "~0.6.0",
    "connect": "~2.14.3",
    "gulp-changed": "~0.3.0",
    "gulp-imagemin": "~0.1.5",
    "gulp-notify": "~1.2.4",
    "gulp-open": "~0.2.8",
    "gulp": "~3.6.0",
    "hbsfy": "~1.3.2",
    "vinyl-source-stream": "~0.1.1",
    "gulp-less": "~1.2.3",
    "bower": "~1.3.3",
    "cssify": "~0.5.1",
    "gulp-awspublish": "0.0.16",
    "gulp-util": "~2.2.14",
    "gulp-rename": "~1.2.0",
    "gulp-s3": "git+ssh://git@github.com/nkostelnik/gulp-s3.git",
    "gulp-clean": "~0.2.4",
    "process": "~0.7.0"
  },
  "dependencies": {
    "backbone": "~1.1.2",
    "jquery": "~2.1.0",
    "lodash": "~2.4.1",
    "d3": "~3.4.8",
    "rickshaw": "~1.4.6",
    "datejs": "~1.0.0-beta",
    "moment": "~2.7.0"
  }
}

js:

$ = jQuery = require('jquery');
var _ = require('lodash');
var Rickshaw = require('rickshaw');
var d3 = require('d3js');
var nvd3 = require('nvd3js');
var moment = require('moment');
require('datejs');
require('select2');

var bootstrap = require('bootstrap');
console.log(bootstrap)

Also - one sometimes useful thing is to have browserify-shim output its diagnostics. This is what my browserify.js task looks like:

var browserify   = require('browserify');
var gulp         = require('gulp');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');
var process      = require('process');

process.env.BROWSERIFYSHIM_DIAGNOSTICS=1;

var hbsfy = require('hbsfy').configure({
  extensions: ['html']
});

gulp.task('browserify', ['images', 'less'], function(){
    return browserify({
      transform: ['hbsfy', 'cssify'],
            entries: ['./src/javascript/app.js'],
        })
        .bundle({debug: true})
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(gulp.dest('./build/'));
});
urban_raccoons
  • 3,499
  • 1
  • 22
  • 33
  • 1
    Thanks much for your reply. The question is centered around twitter bootstrap, that is what is causing the headache. As I mentioned, I understand I shouldn't need to shim jquery, I was just trying everything I could think of to get bootstrap.js to work with browserify, and it has a dependency on jQuery. jQuery actually works just fine in my example, but when I use the line to require 'bootstrap' I get the 'jQuery' undefined error in the console. So I am probably shimming bootstrap in the wrong way. I hope that is clear. Thanks again for the reply. – rob.luton Jul 19 '14 at 00:56
  • Hey @rob.luton, I've updated my answer to include bootstrap. Sorry about not being more direct earlier. I hope it helps! – urban_raccoons Jul 22 '14 at 18:18
  • Thank you! I haven't had a chance to try it yet, but the example represents exactly what I need. – rob.luton Jul 23 '14 at 19:01
  • cool yeah it compiled fine for me, so I hope it will work for you. – urban_raccoons Jul 23 '14 at 21:28
  • @urban_racoons I found that using `jquery:jQuery` worked for me while `jquery:$` threw an Error.[Check this note,Im using evernote because my pastebin is still blocked,sorry for the code formatting](https://www.evernote.com/shard/s218/sh/909976b1-ded8-48c6-80ac-04238b0ccb3d/8daebbd108b23d20ac6d2f300f570341) Im using Bootstrap 3.3.1 – vamsiampolu Jan 05 '15 at 07:12
  • Thanks. Solved my bootstrap problem. As mentioned in one of the comments, jquery:jQuery works instead of jquery:$ – Dmitri Pavlutin Apr 05 '15 at 14:11
  • @vamsiampolu Thanks for pointing that out. For whatever reason, my setup will build with either $ or jQuery, but looking at the bootstrap code I agree that it should be jQuery, so I've changed the answer. Sorry it took me so long to update the answer! – urban_raccoons May 11 '15 at 17:40
26

There is error as I am using browserify which require the variable '$' or 'jQuery' to be defined.

adding the window to make it global resolve the error. Not sure if this would be the correct way to do, if not, let me know. 

window.$ = window.jQuery = require('jquery');
var bootstrapjs = require('bootstrap-sass');
ken
  • 13,869
  • 6
  • 42
  • 36
1

I've been wondering about this for a while. This simple solution does the job for me:

import foo from 'foo';
import bar from './bar';
import { default as $ } from "jquery";
global.$ = $;
global.jQuery = $; // This one does the trick for bootstrap!
// Boostrap's jQuery dependency only works with require, not with ES6 import!
const btp = require('bootstrap');
jollege
  • 1,019
  • 1
  • 9
  • 12
  • 1
    Now, how to include the bootstrap css dependency in a similar way without adding it directly to the html file? – jollege Jan 26 '17 at 13:10
1

So to make Bootstrap to work with Browserify you're going to need one of Browserify CSS transforms.

First the index.js (browserify entry)

// Bootstrap needs jQuery on the Window
window.jQuery = $  = require('jquery');
// include popper.js if you want Bootstrap tooltips
window.Popper = require('popper.js');
// include bootstrap js libs (not the CSS libs as yet)
require('bootstrap');
// then the CSS Lib
require('bootstrap/dist/css/bootstrap.css');

NPM Installs:

npm install bootstrap@4.0.0-alpha.6 jquery popper.js

To use tooltips globally:

Per the Bootstrap docs.

$('[data-toggle="popover"]').popover();

I have a Browserify-Budo repo here. If you want to see it working.

peterb
  • 891
  • 8
  • 7