title: Laravel app.js defer is not loading before content
body: <p>I am trying to add jquery and use into a new project</p>
  <p>app.js</p>
  <pre><code>require('./custom');
  require('./bootstrap');
  require('alpinejs');
  </code></pre>
  <p>custom.js</p>
  <pre><code>window.$ = require('jquery');
  window.Swal = require('sweetalert2');
  </code></pre>
  <p>guest.blade.php</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;{{ str_replace('_', '-', app()-&gt;getLocale()) }}&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
          &lt;meta name=&quot;csrf-token&quot; content=&quot;{{ csrf_token() }}&quot;&gt;
  
          &lt;title&gt;{{ config('app.name', 'Laravel') }}&lt;/title&gt;
  
          &lt;!-- Fonts --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&amp;display=swap&quot;&gt;
  
          &lt;!-- Styles --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;{{ mix('css/app.css') }}&quot;&gt;
  
          &lt;!-- Scripts --&gt;
          &lt;script src=&quot;{{ mix('js/app.js') }}&quot; defer&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class=&quot;font-sans text-gray-900 antialiased&quot;&gt;
              {{ $slot }}
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>welcome.blade.php</p>
  <pre><code>&lt;x-guest-layout&gt;
      &lt;script&gt;
          function alerta() {//This Work
              Swal.fire(&quot;Hello World Sweetalert2&quot;);//This Work
              $('.lol').hide();//This Work
          }
  
          $(function() {//$ This not Work
              console.log( &quot;ready!&quot; );
          });
          Swal.fire(&quot;Hello World Sweetalert2&quot;);//This not Work
      &lt;/script&gt;
      &lt;x-jet-button onclick=&quot;alerta()&quot; class=&quot;lol&quot;&gt;Alert&lt;/x-jet-button&gt;
  &lt;/x-guest-layout&gt;
  </code></pre>
  <p>And finally get the error <em>Uncaught ReferenceError: $ is not defined</em> or <em>Uncaught ReferenceError: Swal is not defined</em></p>
  <p>How can i solve this?</p>
  <p>Edit:
  Thanks to @Areg this question is solved, I understood this better after reading <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script" rel="nofollow noreferrer">The Script element</a></p>