Laravel app.js Conflicts with another min.js file

Laravel app.js Conflicts with another min.js file

rot2rickrot2rick Posts: 8Questions: 2Answers: 0

Hi i have the same problem as @kthorngren, and at home it disables my bootstrap template js file and nothing works like before, no power button, divs are shifted, but when i comment out the src = "{{asset ('js / app.js')}}" defer> </script>everything is working fine.
With src = "{{asset ('js / app.js')}}" defer> </script>

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

Answers

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin

    Can you give me a link to the page showing the issue please? Are there any errors shown in your browser's console?

    Thanks,
    Allan

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin

    Looks like this thread and this one are the same.

    Allan

  • rot2rickrot2rick Posts: 8Questions: 2Answers: 0

    @allan , here are the errors im getting in the console

    Uncaught ReferenceError: jQuery is not defined,

    Uncaught TypeError: a is not a function,

    Uncaught ReferenceError: $ is not defined,

    Uncaught ReferenceError: PerfectScrollbar is not defined

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Uncaught ReferenceError: jQuery is not defined

    See this SO thread. Sounds like you are missing or have out of order JS include files.

    Kevin

  • rot2rickrot2rick Posts: 8Questions: 2Answers: 0
    edited March 2021

    @kthorngren, @allan
    Thank you but the link didn't help me.
    i using Laravel 8 with Vuejs
    Here is my
    app.blade.php

    <!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    
    <head>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>R&D LoungeApp</title>
      
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
        <!-- Favicon icon -->
        <link rel="icon" href="{{ asset('assets/images/logo_r&d.png') }}" type="image/x-icon">
    
        @yield('css')
        <!-- vendor css -->
        <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    
    
    </head>
    
    <body class="">
        <div class="loader"></div>
        <div id="app">
            
            @include('base.navbar')
           
            @include('base.header')
          
            <div class="pcoded-main-container">
                @yield('content')
                @yield('vuejs')
            </div>
    
            <!-- Required Js -->
            <script src="assets/js/vendor-all.min.js"></script>
            <script src="assets/js/plugins/bootstrap.min.js"></script>
            <script src="assets/js/pcoded.min.js"></script>
            <script src="assets/js/menu-setting.min.js"></script>
    
    
            @yield('javascript')
          
        </div>
        <!-- Footer -->
        @include('base.footer')
    
        <!-- Scripts VueJS-->
        <script src="{{ mix('js/app.js') }}"></script> 
    </body>
    
    </html>
    

    As you can see, if i comment src = "{{asset ('js / app.js')}}" defer> </script> i ll get the image 2, if leave it i ll get the image1 and with a total dysfunctional of all the template, the tips, the menus, nothing works.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    I'm not familiar with Laravel but did you try what mixmaster suggested in the other thread you posted in?

    You will have to make sure that contents of the datatables js files are in App.js. A simple way of doing that is instead of using the external datatable JS file link through their CDN, place the file on your server and use laravel mix to add it to App.js and then include datatables in /resources/js/app.js

    In addition it sounds like you might need to include jquery.js. If this doesn't help then, as Allan asked, please post a link to your page for debugging.

    Kevin

This discussion has been closed.