Livewire Laravel Echo cannot be found

I have a poll event in a livewire component and in the component blade Laravel Echo cannot be found is thrown. I installed Laravel echo as per in documentation and uncommented in bootstrap.js

However my layout is using jquery hence i removed the defer in app.js script in the main layout. My format is like this is the head section of my layout.

@livewireStyles
@livewireScripts
  
<script src="{{ mix('js/app.js') }}" ></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>

bootstrap.js

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

i read the livewire docs and it says my window.Echo object must be globally available. I am not sure if i have done it correctly.

my component

class PaddleConfirm extends Component
{
    public $newPaymentNotification = false;

    protected $listeners = ['echo:orders,UserPayment' => 'notifyNewOrder'];

    public function notifyNewOrder()
    {
        // $this->newPaymentNotification = true;
        
        Log::info("new payment method");
    }


    public function render()
    {
          return view('livewire.paddle-confirm');
    }
}

My event is fired however component is not listening to this, perhaps it is because of the Echo not found warning. Any help is greatly appreciated.

Using Livewire: v2.0 Using Laravel : v8.40

I found a similar question but it did not resolve my issue

Solution

Livewire scripts should be at the end of the body tag, not in the head, as that is what enables it to boot in the correct order.

Try moving that first and seeing what happens.

Also recommended to put the app.js script at the end of the body tag too or add the defer back on the app.js script, as defer won't stop it being used in your layout, it just controls what order JS scripts start.


<head>
    <!-- other head stuff here -->

    @livewireStyles

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
</head>

<body>
    <!-- body stuff here -->
    
    @livewireScripts
    <script src="{{ mix('js/app.js') }}" ></script>
</body>

The solution is quoted and was provided by joshhanley on Github Discussion. Credit goes to him