"Define is not defined" error when installing Jquery with Bower

Question

My sanity is on the edge of destruction...

I'm playing around with bower to install jQuery together with slick-carousel, but things won't work. But let me explain my approach step by step.

1. Here is my bower.json file. Both components are installed

{
  "name": "the-lens",
  "version": "0.0.1",
  "dependencies": {
    "slick-carousel": "^1.5.9",
    "jquery": "^2.2.3"
  },
  "private": true
}

2. I use bowcat to concat jquery with slick. I have checked the final file, and jquery comes first, slick last. The file name is build.js

3. I combine my own custom.js with build.js into a final all.js (my code comes at the very end).

4. I reference all.js from my html head. I can check page source and follow the link and I can see my all.js is correctly loaded.

5. In my html I check if jquery is loaded witn an internal script. It alerts "Yay! Works from internal". So far so good.

<script type="text/javascript" >
  if (typeof jQuery == 'undefined') {
    alert("Doesn't work from internal");
  } else {
    alert("Yay! Works from internal");
 }
</script>

6. I test to see if the same test works from my external javascript file, in this case the all.js (my code comes after jquery and slick e.g. last).

Now NOTHING happens, and I get this error from my console log: "Uncaught ReferenceError: define is not defined in all.js:9844"

(function() {
  if (typeof jQuery == 'undefined') {
    alert("Doesn't work from external");
  } else {
    alert("Yay! Works from external");
  }
})();

7. If I remove jquery from my all.js and load jquery with the google cdn instead, my external test from above starts to work. E.g. I get two alert boxes with one saying works from external, the other from internal. Here is the google cdn I use

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

So that sums it up. Somehow things work when I split my javascript up so jquery is called from the google cdn, and slick and my own is called from all.js. But if I do that bower becomes absolute.

What I want to know is how I can use bower to install slick and jquery, then combine them with my own js into one big file and call that single script from my html, so everything works (works == my alert test is called from all.js)

If something is unclear or more information is needed, feel free to ask in the comments.

UDATE

Changing the JQuery version installed with bower to 2.2.0 changes nothing...

UPDATE 2: Code from 9844 in all.js. Line 1 here would be 9844 in all.js

define( [
	"./core",
	"./selector",
	"./traversing",
	"./callbacks",
	"./deferred",
	"./core/ready",
	"./data",
	"./queue",
	"./queue/delay",
	"./attributes",
	"./event",
	"./event/alias",
	"./event/focusin",
	"./manipulation",
	"./manipulation/_evalUrl",
	"./wrap",
	"./css",
	"./css/hiddenVisibleSelectors",
	"./serialize",
	"./ajax",
	"./ajax/xhr",
	"./ajax/script",
	"./ajax/jsonp",
	"./ajax/load",
	"./event/ajax",
	"./effects",
	"./effects/animatedSelector",
	"./offset",
	"./dimensions",
	"./deprecated",
	"./exports/amd"
], function( jQuery ) {

return ( window.jQuery = window.$ = jQuery );

} );

UPDATE 3

I have now taken a close look at the jquery served from the google CDN. It does not have the define( [...], function( jQuery ) like the jquery downloaded with bower has (see update two).

This kind of makes sense. All those things in the define array is present in the ./bower_components/jquery/src/ folder, but not in the ./web/javascript/ folder where my all.js is. Check screenshot below (full size picture here):

Question is how I solve that problem...

Answer 1

So I finally figured out what was wrong. Or rather, I found the solution, not the exact problem.

Like @evolutionxbox pointed out in the comments above, the problem was with bowcat. I'm not sure what js file it choose from the jquery folder, but it certainly wasn't the correct one.

Instead I did this:

1. First I checked the correct path to jquery with $ bower list --paths

$ bower list --paths

'slick-carousel': [
  'bower_components/slick-carousel/slick/slick.min.js',
  'bower_components/slick-carousel/slick/slick.css',
  'bower_components/slick-carousel/slick/slick-theme.css',
  'bower_components/slick-carousel/slick/fonts/*'
],
jquery: 'bower_components/jquery/dist/jquery.js'

2. I then used these paths to let gulp concatenate my files instead. The below code is from my gulpfile.js

var gulp   = require('gulp'),
    concat = require('gulp-concat');

gulp.task('scripts', function() {
    return gulp.src([
    './bower_components/jquery/dist/jquery.js',
    './bower_components/slick-carousel/slick/slick.min.js',
    './app/Resources/javascript/custom.js'
   ])
  .pipe(concat('all.js'))
  .pipe(gulp.dest('./web/js/'));
});

3. I ran my $ gulp scripts command and now my all.js passes both the internal and external test.

Conclusion: I can recommend gulp, but not bowcat :P But then again, in bowcats defence, I might just be a total noob at using it... But whatever, I digress.

Have a nice day folks. Feel free to comment if you have any questions to my solution.