blade @push scripts , jquery: $ is not a function

January 22, 2022

I have a component file:

my-component.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
......
</head>
<body>
........

  <script src="/vendor/jquery/jquery.min.js" defer></script>
  @stack('scripts')
</body>

</html>

otherfile.blade.php


<x-my-component>
.....

@push("scripts")
  <script defer>
    console.log($("body")); // a simple print element
  </script>
@endpush
</x-my-component>

browser console

Uncaught TypeError: $ is not a function

I have tried to use yield and section and got the same result
how can I solve this problem? (I have the jquery file on my public vendor so there’s no way the problem is about jquery import path)

>Solution :

From the documentation for the script element:

Warning: [The defer] attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

So the script that loads jQuery is executed after the document is parsed and the script which tries to use it is executed immediately (because the defer attribute is ignored) which is before $ is added to the scope of the page.