app.js clashing with other js files in laravel

You are probably here because some aspect of your laravel javascript dependent webpage isn't displaying properly as it should because you think that some js files included in your layout/home page(e.g layout/app.blade.php) for example, are somewhat clashing. Here is a quick solution

The problem could be because of the default laravel app.js. Sometimes, removing defer flag from the app.js script tag will work but it may be that there is this other aspect of your laravel web page that depends on it, especially if you use vuejs in your laravel app. So in that case, you would want app.js and others_scripts.js to be included.

Three quick solutions:

Solution 1

### Remove the defer flag from the script tag. from this:

<script src="{{ asset('js/app.js') }}" defer></script>

to this:

<script src="{{ asset('js/app.js') }}"></script>

Solution 2

Make sure that you do not include either the minified or unminified jquery script file. Something like this

<!-- jQuery -->
    <script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>

Please you have to remove it as the default laravel app.js will do!!!

Solution 3 (Ideally the effective in most cases )

Delete "defer" from js/app.js and all another scripts write after js/app.js

<script src="{{ asset('js/app.js') }}" ></script>
    <!--  Jquery scripts -->
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!--  your  scripts -->
<script src="{{ asset('js/script.js') }}"></script>

This is solution was culled from a thread in an open issue on the official laravel github repository.

All the best!!!