modules showing undefined in console upon bundling them with browserify

Question

I am new to browserify and trying to understand it before I shift my project to it.

I went through the docs and understood how to use it, I am trying to include some more dependencies but upon usage, they are being stated not defined!

Here are my files:

main.js

window.jQuery = $ = require("jquery");
require('bootstrap');
require("jquery-confirm");
require("html2canvas");

package.json

{
  "dependencies": {
    "bootstrap": "^3.3.7",
    "html2canvas": "^0.5.0-beta4",
    "jquery": "^3.2.1",
    "jquery-confirm": "^3.3.2",
    "jshint": "^2.9.5",
    "qrcodejs": "^1.0.0"
  }
}

Html2canvas, jshint and qrcode all are being shown undefined when I try to access these through browser console but jquery-confirm seems to work fine.

Let me know where I am wrong on this.

-Thanks

Answer 1

That's because you're loading them as modules. The whole point of being able to use a bundling system such as Browserify is so you don't have to have global variables.

If you check the return value from one of those return calls, you'll see.

Example:

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

If you would like to make them global (and you should really caution against doing this) then you can attach them to the window object.

window.html2canvas = require('html2canvas');

But I thoroughly want to suggest that you don't make things global unless you have to. For example, you can use jQuery in any of your files just by doing this at the start:

var $ = require('jquery');