How to require jQuery in Node using Gulp?

Question

Building a PWA on top of NodeJS. Utilizing gulp to processes package/bundle for production. Also using jQuery.

Receiving the error:

Uncaught ReferenceError: jQuery is not defined

package.json:

"devDependencies": {
  "browserify": "^16.2.2",
  "gulp": "^3.9.1",
  "gulp-browserify": "^0.5.1",
  "gulp-clean-css": "^3.10.0",
  "gulp-concat-css": "^3.1.0",
  "gulp-if": "^2.0.2",
  "gulp-sourcemaps": "^2.6.4",
  "gulp-uglify": "^3.0.1",
  "gulp-webserver": "^0.9.1",
  "jquery": "^3.3.1",
  "sw-precache": "^5.2.1"
}

Gulp task is:

gulp.task('js', function () {
return gulp.src(src + '/js/app.js')
    .pipe(browserify())
    .pipe(gulpif(environment === 'production', uglify()))
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(gulp.dest(dest + '/js'));
});

app.js is:

(function () {
  'use strict';
  var $ = jQuery = require('jquery');
  require('./bootstrap-3.3.7.min.js');
  $('.loader').fadeOut(1000);

  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
    .register('./service-worker.js')
    .then(function (registration) 
      console.log('Service Worker Active', registration.scope);
    })
    .catch(function (err) {
      console.log('Service worker registration failed : ', err);
    });
  }
})(); // Page Ready

If my understanding of Node is correct, jQuery gets included from the require call before used the $. So I am confused as to why I am receiving the error.

Note that while other posts have had issues with Browserify and jQUery, I do not believe that is the issue.

Possible duplicate of [order dependencies: jQuery is not defined with browserify](https://stackoverflow.com/questions/25334974/order-dependencies-jquery-is-not-defined-with-browserify) — rlemon, Sep 26 '18 at 20:07

score 1 · Accepted Answer · answered Sep 26 '18 at 20:10

1

You are using use strict, which prevents any miss creation of global variable.

Thus when issue is with var $ = jQuery = require('jquery'); as accidental variable jQuery which doesn't exist is been created as global variable and assigned to $. use strict prevented this.

Just use

'use strict';
 var $ = require('jquery');

Also do read What does 'use strict' do in JavaScript

answered Sep 26 '18 at 20:10

NAVIN

3,193
4
19
32

Thanks! That seems to be the issue. I had been playing with that thinking it might be the culprit and I had already tried your suggestion. When I try that, Bootstrap balks saying that it requires jQuery. Do you know of a way to utilize 'use strict', which I like using to protect things, and require jQuery into the code? Perhaps there is a better way to go about this? Let me know if oyu would like to see more code. – Clay Hess Sep 26 '18 at 20:33
Also, I forgot to ask...I use VS Code and ESLint. Are you aware of a lineter setting that woudl have caught this? – Clay Hess Sep 26 '18 at 20:36
can also use jshint with your Visual Studio or Sublime or anyother by installing their plugin for jshint – NAVIN Sep 26 '18 at 20:39
I used to use JSHint, but I moved to ESLint due to using more ECMAScript features. – Clay Hess Sep 26 '18 at 20:41
JSHint got lots of add on to file to let them know what to check for or not. like add this to top of js file `/*jshint multistr: true,node: true, esversion: 6, undef: true, unused: true, varstmt: true*/` for more options see http://jshint.com/docs/options/ – NAVIN Sep 26 '18 at 20:43
To expose the imported jQuery library to both `$` and `jQuery`, what I've done in the past is just set those variables on to the `window` object after the import: `var jQuery = require('jquery'); window.$ = window.jQuery = jQuery;` – romellem Sep 27 '18 at 13:58

How to require jQuery in Node using Gulp?

1 Answers1