I am getting the following error when I use bootstrap slider () in my Electron(/) app :

"Uncaught TypeError: $(...).Slider is not a function"

Earlier I was also struggling with using Jquery but solved it using : :

window.$ = window.jQuery = require('/path/to/jquery'); instead of regular :

The reason quoted was Query contains something along this lines:

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

I don't understand what is the right way to use it for bootstrap the slider.

I could see that bootstrap-slider.js has a ponent dealing with "module" which might be causing the anomaly just like in jquery.

(function(root, factory) {
    if(typeof define === "function" && define.amd) {
            define(["jquery"], factory);
    } else if(typeof module === "object" && module.exports) {
            var jQuery; 
            try {   
                    jQuery = require("jquery");
            } catch (err) { 
                    jQuery = null; 
            }       
            module.exports = factory(jQuery);
    } else {
            root.Slider = factory(root.jQuery);
    }       

Please tell me how to deal with this.

I am getting the following error when I use bootstrap slider (https://github./seiyria/bootstrap-slider) in my Electron(http://electron.atom.io/docs/latest/tutorial/quick-start/) app :

"Uncaught TypeError: $(...).Slider is not a function"

Earlier I was also struggling with using Jquery but solved it using : https://github./atom/electron/issues/254 :

window.$ = window.jQuery = require('/path/to/jquery'); instead of regular :

The reason quoted was Query contains something along this lines:

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

I don't understand what is the right way to use it for bootstrap the slider.

I could see that bootstrap-slider.js has a ponent dealing with "module" which might be causing the anomaly just like in jquery.

(function(root, factory) {
    if(typeof define === "function" && define.amd) {
            define(["jquery"], factory);
    } else if(typeof module === "object" && module.exports) {
            var jQuery; 
            try {   
                    jQuery = require("jquery");
            } catch (err) { 
                    jQuery = null; 
            }       
            module.exports = factory(jQuery);
    } else {
            root.Slider = factory(root.jQuery);
    }       

Please tell me how to deal with this.

• javascript
• jquery
• twitter-bootstrap
• node-webkit
• nativeapplication

3 Answers 3

You have 2 options:

1. Include jQuery and Bootstrap slider regularly in the index.html page with a script after each to make them global like so:

<script src="bower_ponents/jquery/dist/jquery.js"></script>
<script type="application/javascript">
    if (typeof module === 'object' && typeof module.exports !== 'undefined') {
        window.$ = window.jQuery = module.exports;
    }
</script>
<script src="path/to/bootstrap-slider.js"></script>
<script type="application/javascript">
    if (typeof module === 'object' && typeof module.exports !== 'undefined') {
        window.Slider = module.exports;
    }
</script>

2. Use require to include jQuery and Slider whenever you need them

var $ = require('jquery');
var Slider = require('bootstrap-slider');

Found that solution below yesterday. Worked for me both with jQuery and Bootstrap Slider. Credits on the bottom.

A better an more generic solution IMO:

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = 
undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

Benefits

• Works for both browser and electron with the same code
• Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
• Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
• Does NOT require node-integration to be false

source here

I was able to fix this by placing my path to jquery in the bootstrap-slider.js

Line 41: jQuery = require("my/path/to/jquery-2.1.4.min.js");

This is probably the wrong solution, but hopefully a bad idea can lead to a good one :)