title: How to use jquery in npm compiled js file without compiling jquery into the output
body: <p>Unfortunately I am getting conflicts with a wordpress plugin loading jQuery into the <code>&lt;head&gt;</code>, and then I have jQuery compiled into my npm <code>main.js</code> file which loads in the footer.</p>
  
  <p>This is how I am loading jQuery into my npm <code>main.js</code> file...</p>
  
  <pre><code>// load jquery
  global.jQuery = global.$ = require('jquery');
  </code></pre>
  
  <p>If I remove this line, my conflict issue is resolved but I then get this errors...</p>
  
  <p><a href="https://i.stack.imgur.com/p5vnZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p5vnZ.png" alt="enter image description here"></a></p>
  
  <p>This is my tooltip function which works fine when jquery is compiled into the file.</p>
  
  <pre><code>// tool tip config
  $('[data-toggle="tooltip"]').tooltip({
      boundary: 'scrollParent',
      placement: 'top'
  });
  </code></pre>
  
  <p>So all my jQuery that is called in <code>main.js</code> stops working.</p>
  
  <pre><code>// commons functions
  (function ($) {
  
      // nothing jquery works in here
  
  })(jQuery);
  </code></pre>
  
  <p>Does anyone know how to fix this in npm main.js file without compiling jQuery in to the mix? So I can jQuery separately in the head.</p>
  
  <p>Thanks in advance for any pointers.</p>