2

I am going through the Manning Getting MEAN book. I want to use bootstrap sass and have loaded bootstrap-loader. When I run nodemon I get the following error:

/Users/mglaz/Projects/mean/theCMF/node_modules/bootstrap/dist/js/bootstrap.js:8
throw new Error('Bootstrap\'s JavaScript requires jQuery')

here's my app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

require('jquery');
require('bootstrap');
require('bootstrap-loader');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

and my package.json

{
  "name": "loc8r",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.8.1",
    "cookie-parser": "~1.3.3",
    "debug": "~2.0.0",
    "express": "~4.9.0",
    "jquery": "^3.1.1",
    "morgan": "~1.3.0",
    "pug": "^2.0.0-beta6",
    "serve-favicon": "~2.1.3"
  },
  "devDependencies": {
    "bootstrap": "^4.0.0-alpha.4",
    "css-loader": "^0.26.1",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "imports-loader": "^0.7.0",
    "node-sass": "^3.13.1",
    "postcss-loader": "^1.2.0",
    "resolve-url-loader": "^1.6.1",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0"
  }
}
0

1 Answer 1

3

Have a look at jQuery not define in bootstrap module and http://blog.npmjs.org/post/112064849860/using-jquery-plugins-with-npm

You need to set the global jQuery variable

global.jQuery = require('jquery');
require('bootstrap');
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.