title: "Define is not defined" error when installing Jquery with Bower
body: <p>My sanity is on the edge of destruction...</p>
  
  <p>I'm playing around with bower to install jQuery together with <a href="https://github.com/kenwheeler/slick" rel="noreferrer">slick-carousel</a>, but things won't work. But let me explain my approach step by step.</p>
  
  <p><strong>1.</strong> Here is my bower.json file. Both components are installed</p>
  
  <pre class="lang-json prettyprint-override"><code>{
    "name": "the-lens",
    "version": "0.0.1",
    "dependencies": {
      "slick-carousel": "^1.5.9",
      "jquery": "^2.2.3"
    },
    "private": true
  }
  </code></pre>
  
  <p><strong>2.</strong> I use <a href="https://www.npmjs.com/package/bowcat" rel="noreferrer">bowcat</a> to concat jquery with slick. I have checked the final file, and jquery comes first, slick last. The file name is build.js</p>
  
  <p><strong>3.</strong> I combine my own custom.js with build.js into a final all.js (my code comes at the very end).</p>
  
  <p><strong>4.</strong> 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.</p>
  
  <p><strong>5.</strong> In my html I check if jquery is loaded witn an internal script. It alerts "Yay! Works from internal". So far so good.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript" &gt;
    if (typeof jQuery == 'undefined') {
      alert("Doesn't work from internal");
    } else {
      alert("Yay! Works from internal");
   }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>6.</strong> 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).</p>
  
  <p>Now <em>NOTHING</em> happens, and I get this error from my console log: "Uncaught ReferenceError: define is not defined in all.js:9844"</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    if (typeof jQuery == 'undefined') {
      alert("Doesn't work from external");
    } else {
      alert("Yay! Works from external");
    }
  })();</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>7.</strong> 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</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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)</p>
  
  <p>If something is unclear or more information is needed, feel free to ask in the comments.</p>
  
  <h1>UDATE</h1>
  
  <p>Changing the JQuery version installed with bower to 2.2.0 changes nothing...</p>
  
  <h1>UPDATE 2: Code from 9844 in all.js. Line 1 here would be 9844 in all.js</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 );
  
  } );</code></pre>
  </div>
  </div>
  </p>
  
  <h1>UPDATE 3</h1>
  
  <p>I have now taken a close look at the <a href="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" rel="noreferrer">jquery served from the google CDN</a>. It does not have the <code>define( [...], function( jQuery )</code> like the jquery downloaded with bower has (see update two).</p>
  
  <p>This kind of makes sense. All those things in the define array is present in the <code>./bower_components/jquery/src/</code> folder, but not in the <code>./web/javascript/</code> folder where my all.js is. Check screenshot below (<a href="https://i.stack.imgur.com/omNEA.jpg" rel="noreferrer">full size picture here)</a>:</p>
  
  <p><a href="https://i.stack.imgur.com/omNEA.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/omNEA.jpg" alt="enter image description here"></a></p>
  
  <p>Question is how I solve that problem...</p>