jQuery not define in bootstrap module

Question

I want to use bootstrap for my website (with node.js). But I have the following error :

/var/www/node_modules/bootstrap/js/transition.js:59 }(jQuery); ^ ReferenceError: jQuery is not defined at Object. (/var/www/node_modules/bootstrap/js/transition.js:59:3) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17) at require (module.js:380:17) at Object. (/var/www/node_modules/bootstrap/dist/js/npm.js:2:1) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10)

I tried to do a

var bootstrap = require('bootstrap');

in my main node.

I installed bootstrap with npm (npm install bootstrap from my folder). I also tried to instal jquery with the same way and to add a var jQuery= require('jquery'); but it does not work. Do you have any idea what could be wrong ? I am starting node.js, i may miss something

Then I use <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> in my HTML webpage to refer to bootstrap `

Solution

To use jquery plugins with npm/node you need to set the global jQuery variable before requiring your plugin [bootstrap in this case]:

global.jQuery = require('jquery');
require('bootstrap');

More details in this npm blog post

Comments

[James Lin]

thanks! I love it that I don't have to shim this and shim that!

[xqwzts]

@Amjad Do you mean bootstrap specifically or some other jQuery plugin? What's the error you're getting? My initialization code with bootstrap 3.3.2 is: var $ = require('jquery'); global.jQuery = $; require('bootstrap'); require('malihu-custom-scrollbar-plugin')($); and this works fine for me...

[BishopZ]

When I try this solution, I get the error "TypeError: Cannot set property 'emulateTransitionEnd' of undefined"

[Anton Dementiev]

I get the same error "TypeError: Cannot set property 'emulateTransitionEnd' of undefined"

[E.B]

I have got the same error ... TypeError: Cannot set property 'emulateTransitionEnd' of undefined

[AndrewL64]

Try changing global.jQuery to global.jQuery = global.$ = require('jquery'); and see if that helps.

[SOFe]

this works if I use a mix of JS and TS. What if I want a pure TS solution?