title: Laravel 5.5 ReferenceError: $ is not defined
body: <p>For some reason my jQuery refuses to load. I am getting an error:</p>
  
  <blockquote>
    <p>ReferenceError: $ is not defined</p>
  </blockquote>
  
  <p>My template is in <code>views/layouts/editor.blade.php</code> and  I am loading jQuery in the head of my template like this</p>
  
  <pre><code>&lt;script src="{{ asset('js/jquery.min.js') }}"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I can see that jQuery is loaded in my console. but still I get the error.</p>
  
  <p>I am compiling my javascript using laravel mix and my webpack.mix.js file looks like this:</p>
  
  <pre><code>// javascript
  mix.js('resources/assets/js/app.js', 'public/js')
     .js('node_modules/jquery/dist/jquery.min.js', 'public/js')
     .autoload({
          jquery: ['$', 'window.jQuery', 'jQuery'],
      });
  // css
  mix.sass('resources/assets/sass/app.scss', 'public/css')
     .sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');
  </code></pre>
  
  <p>Why is this happening?</p>
  
  <p>EDIT: </p>
  
  <p>My template file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="{{ app()-&gt;getLocale() }}"&gt;
      &lt;head&gt;
  
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;!-- CSRF Token --&gt;
          &lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
          &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
          &lt;!-- Styles --&gt;
          &lt;link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet"&gt;
          &lt;link href="{{ asset('css/app.css') }}" rel="stylesheet"&gt;
          &lt;!-- scripts --&gt;
          &lt;script src="{{ asset('js/jquery.min.js') }}"&gt;&lt;/script&gt;
  
          &lt;script&gt;
              $(function(){
                  alert();
              });
          &lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
  
          @yield('content')
  
          &lt;!-- Scripts --&gt;
  
          &lt;script src="{{ asset('js/app.js') }}"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I look in my console I see the following</p>
  
  <p><a href="https://i.stack.imgur.com/ssy2y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ssy2y.png" alt="enter image description here"></a></p>
  
  <p>If I open the jquery.min.js file in a new tab I see the following:</p>
  
  <p><a href="https://i.stack.imgur.com/FVxRW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FVxRW.png" alt="enter image description here"></a></p>
  
  <p>So it's jquery underneath all that webpack boilerplate stuff.</p>
  
  <p>I have also run <code>npm run production</code> which removes all that webpack stuff and leaves the raw jquery.</p>