title: Magento 2 Override JS of a module but on first request dependencies not loading
body: <p>I want to change the HTML layout of a 3rd party module which is displaying INC/DEC buttons on the quantity input field on the product description page.</p>
  
  <p>For that, I have to override a JS of a 3rd party module which I did and is working all fine.</p>
  
  <p><strong>The issue is that on the first request with an empty cache, it's dependencies are not loading</strong> and giving the following error:</p>
  
  <pre><code>TypeError: $.widget is not a function (\app\code\MyCompany\General\view\frontend\web\js\qtycontrol.js)
  TypeError: $(...).qtycontrol is not a function (where it has been called)
  </code></pre>
  
  <p>Refreshing the page once, making it work fine.</p>
  
  <p>Please find the details below of the code of the module I created to override and also of the original 3rd party module.</p>
  
  <p><strong>Override Module (\app\code\MyCompany\General\view\frontend\web\js\qtycontrol.js):</strong></p>
  
  <pre><code>;define([
      'jquery',
      'jquery/ui'],
  (function ($, window, document, undefined) {
      $.widget("infortis.qtycontrol", {
          , _create: function()
          {
              this._initPlugin();
          }
          , _initPlugin: function()
          {
              //Exetnded code to display inc/dec buttons on the quantity input field but with changes in HTML.
          }
      }); //end: widget
  })(jQuery, window, document));
  </code></pre>
  
  <p><strong>Override Module (\app\code\MyCompany\General\view\frontend\requirejs-config.js):</strong></p>
  
  <pre><code>var config = {
      map: {
          '*': {
              'qtycontrol': 'MyCompany_General/js/qtycontrol'
          }
      }
  };
  </code></pre>
  
  <p><strong>Override Module (\app\code\MyCompany\General\etc\module.xml):</strong></p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"&gt;
      &lt;module name="MyCompany_General" setup_version="1.0.0"&gt;
          &lt;sequence&gt;
              &lt;module name="Infortis_Base"/&gt;
          &lt;/sequence&gt;
      &lt;/module&gt;
  &lt;/config&gt;
  </code></pre>
  
  <p><strong>3rd Party original module (\app\code\Infortis\Base\view\frontend\web\js\qtycontrol.js):</strong></p>
  
  <pre><code>;(function ($, window, document, undefined) {
      $.widget("infortis.qtycontrol", {
          , _initPlugin: function()
          {
              //Some code to display inc/dec buttons on the quantity input field.
          }
      }); //end: widget
  })(jQuery, window, document);
  </code></pre>
  
  <p><strong>3rd Party original module (\app\code\Infortis\Base\view\frontend\requirejs-config.js):</strong></p>
  
  <pre><code>var config = {
      paths: {
          'qtycontrol': 'Infortis_Base/js/qtycontrol'
      },
      shim: {
          'qtycontrol': {
              deps: ['jquery', 'jquery/ui']
          }
      }
  };
  </code></pre>
  
  <p>I am running the application with the following environment:</p>
  
  <ul>
  <li>Operating system => Windows.</li>
  <li>Package => WAMP</li>
  </ul>
  
  <p>As I am new to Magento 2 but well aware of PHP and basic JavaScript concepts. But it's possible that might missing some basic concept. Any help would be appreciated.</p>