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?
You could try using this instead. Do you get the same error in multiple browsers?
(function($) {
'use strict';
// all functions here
})(window.jQuery);
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.