Uncaught ReferenceError: jQuery is not defined, even though jQuery is first imported script

Question

This question has been asked before Uncaught ReferenceError: jQuery is not defined and Uncaught ReferenceError: $ is not defined? and Test if jquery is loaded not using the document ready event

But, I find the error on browser as

main.js:88 Uncaught ReferenceError: jQuery is not defined
    at main.js:88

My main.js looks like

(function($) {
  'use strict';
 // all functions here

})(jQuery);

I make imports in my index.html as

<!-- build:js scripts/main.min.js -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!--<script src="scripts/vendors/jquery3.2.0.min.js"></script>-->
  <script src="scripts/vendors/waypoints.min.js"></script>
  <script src="scripts/main.js"></script>
  <!-- endbuild -->

So, as per the other answers, jQuery is first import. I am using gulp as build system.
My project is forked from https://github.com/google/web-starter-kit

I run gulp serve:dist and see

$ gulp serve:dist
[11:31:41] Requiring external module babel-register
[11:31:43] Using gulpfile ~/WebstormProjects/my-website/gulpfile.babel.js
[11:31:43] Starting 'clean'...
[11:31:43] Finished 'clean' after 27 ms
[11:31:43] Starting 'default'...
[11:31:43] Starting 'styles'...
[11:31:43] styles all files 7.41 kB
[11:31:43] Finished 'styles' after 869 ms
[11:31:43] Starting 'html'...
[11:31:44] Starting 'scripts'...
[11:31:44] Starting 'images'...
[11:31:44] Starting 'copy'...
[11:31:44] html index-rwd.html 14.96 kB
[11:31:44] html index.html 3.94 kB
[11:31:44] html all files 18.9 kB
[11:31:44] Finished 'html' after 401 ms
[11:31:45] scripts all files 99.11 kB
[11:31:45] Finished 'scripts' after 1.83 s
[11:31:45] copy all files 6.11 kB
[11:31:45] Finished 'copy' after 1.64 s
[11:31:45] images all files 542.87 kB
[11:31:45] Finished 'images' after 1.79 s
[11:31:45] Starting 'copy-sw-scripts'...
[11:31:45] Finished 'copy-sw-scripts' after 3.05 ms
[11:31:45] Starting 'generate-service-worker'...
Total precache size is about 222 B for 1 resources.
[11:31:45] Finished 'generate-service-worker' after 8.64 ms
[11:31:45] Finished 'default' after 2.85 s
[11:31:45] Starting 'serve:dist'...
[11:31:45] Finished 'serve:dist' after 19 ms
[WSK] Access URLs:
 -------------------------------------
       Local: http://localhost:3001
    External: http://192.168.1.65:3001
 -------------------------------------
          UI: http://localhost:3002
 UI External: http://192.168.1.65:3002
 -------------------------------------
[WSK] Serving files from: dist/public

What am I doing wrong?

Answer 1

There were multiple problems.

First, in the index.html, I removed the section

<!-- build:js scripts/main.min.js -->
<!-- endbuild -->

which gulp uses to combine JS and minify them in 1 file. The fix was to add the following

<!-- build:js scripts/main.min.js -->
  <script src="scripts/vendors/jquery-1.9.1.min.js"></script>
  <script src="scripts/vendors/waypoints.min.js"></script>
  <script src="scripts/main.js"></script>
  <!-- endbuild -->

Secondly, in gulp scripts task, I had to tell gulp as to what all scripts to copy. The fix looked like

gulp.task('scripts', () =>
  gulp.src([
    // Note: Since we are not using useref in the scripts build pipeline,
    //       you need to explicitly list your scripts here in the right order
    //       to be correctly concatenated
    './app/scripts/vendors/jquery-1.9.1.min.js',
    './app/scripts/vendors/waypoints.min.js',
    './app/scripts/main.js'
    // Other scripts
  ])

Lastly, as mentioned by @Wolfgang Leon in Gulp - jQuery is not defined, the jQuery v3.2.0 was somehow incompatible, so I replaced it with jQuery v1.9.1

This helped me fix the issue completely. #learnednewthings

Answer 2

You could try using this instead. Do you get the same error in multiple browsers?

(function($) {
  'use strict';
 // all functions here

})(window.jQuery);