bootstrap installed via npm throws error about "Error: Cannot find module 'jQuery'"

Question

I'm new to node and npm and express.js still learning. on bootstrap website its you can use bootstrap using npm install, and I did the same installed bootstrap using npm install bootstrap --save, did that for jquery too and required in app.js

app.js file

var jQuery = require('jquery');
var bootstrap = require('bootstrap');

Changed it to this too

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

var jQuery = require('jquery'); var bootstrap = require('bootstrap');

but when i run DEBUG=nodeAangularMySql:* ./bin/www I get the following errors.

/home/sharif/Sites/node/nodeAangularMySql/node_modules/bootstrap/js/transition.js:59
}(jQuery);
  ^
ReferenceError: jQuery is not defined
    at Object.<anonymous> (/home/sharif/Sites/node/nodeAangularMySql/node_modules/bootstrap/js/transition.js:59:3)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/home/sharif/Sites/node/nodeAangularMySql/node_modules/bootstrap/dist/js/npm.js:2:1)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

This my very first time using bootstrap that way usually I download and copied that in stylesheets folder under public folder or Google CDN.

never used that before. I would like to know few thisn

How to use bootstrap using npm install
How to use jquery using npm install
and how to fix this error

Any Idea?

Bootstrap is meant to be used in a browser. I'm wondering, what are you trying to do with it in node? — Andrew Lavers, May 15 '15 at 00:27
Thansk @AndrewLavers for your feedback.. but it says on the bootstrap download page `Install with npm` as i said i'm a newbie in node development I certainly have no idea if that has been the case — Amjad, May 15 '15 at 00:56
I can understand your confusion. You could use npm in conjunction with browserify (https://www.npmjs.com/package/browserify) to build client side javascript projects. I imagine that's what bootstrap guys have in mind having that in their docs. — Andrew Lavers, May 15 '15 at 01:03
For the record, there is a very legitimate reason to run browser-specific code in Node: testing. Running your test suite in Node is significantly faster than running it in the browser, and if your code uses Bootstrap then you need to bring it in to your test environment. Not that this is relevant to the OP, but I'm mentioning it because others (like myself) would still like to find a fix for this issue. — machineghost, Apr 01 '16 at 21:18
Is this not allready answered here? http://stackoverflow.com/questions/22792254/how-do-i-load-bootstrap-using-npm — Moshie, Nov 12 '16 at 15:13

Karan · Answer 1 · 2016-12-11T15:25:20.430

Use the below CDN in the views file either in hbs or html and the below CDN's should work fine.

I too was struggling with the same, but still trying to get the bootstrap rendered through node, until the below CDN's should work fine from the views, if included.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

score 0 · Answer 2 · answered Jan 08 '17 at 17:30

You need to do this:

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

You may encounter some problems if you are using a linter like eslint, but consult their documentation.

What you are doing here is assigning the global variables $ and jQuery again to the global window object, which is where bootstrap is looking for it. Note that in this JS file, you can use the jQuery variable much like you normally would, but if you tried to use $ or jQuery from the console in your browser, it would not be there. But when you reassign it to window.$ and window.jQuery, it is available again.

bootstrap installed via npm throws error about "Error: Cannot find module 'jQuery'"

2 Answers2