Breeze, Vue, Inertia SSR, ReferenceError: Echo is not defined

[HarbourDesign]

Echo Version

1.17.1

Laravel Version

11.31

PHP Version

8.3

NPM Version

10.9.0

Database Driver & Version

Mysql

Description

When the Echo channel is written like this in Vue file:

let channel = 'Echo.channel('AdminChannel');

I get the error that Echo is not defined when using SSR (php artisan inertia:start-ssr).

Well I figured out a work around. I added the channel to a function that is control by a button :

let channel = ''; //Echo.channel('AdminChannel');

function start_listening() {
   channel = Echo.channel('AdminChannel');
   channel.listen('AdminEvent', (e) => {} 

At first I tried a setTimeout, but no length of time work. It seems to require human interface, like an activate voice button. Keep in mind, Echo.private('test'); doesn't return an error. Is this Normal or a bug???

Steps To Reproduce

event.php:

 public function broadcastOn(): Channel
    {
        return new Channel('AdminChannel');
    }

channels.php:

Broadcast::channel('AdminChannel', function () {
    return true;
});

page.vue file:

 let channel = 'Echo.channel('AdminChannel');

Works fine with php artisan serve and npm run dev, but not with start-ssr and build.

[crynobone]

Hey there, thanks for reporting this issue.

We'll need more info and/or code to debug this further. Can you please create a repository with the command below, commit the code that reproduces the issue as one separate commit on the main/master branch and share the repository here?

Please make sure that you have the latest version of the Laravel installer in order to run this command. Please also make sure you have both Git & the GitHub CLI tool properly set up.

laravel new bug-report --github="--public"

Do not amend and create a separate commit with your custom changes. After you've posted the repository, we'll try to reproduce the issue.

Thanks!

[ProjektGopher]

@HarbourDesign Can you post your whole .vue file? The lifecycle of a vue component is different when using SSR. This feels to me like you're just doing something that needs to be done once the page has been hydrated.

[ProjektGopher]

@HarbourDesign I was thinking about this some more this morning, and I'm wondering... Did this error show up during compilation, or did you see this in your browser console?

[ProjektGopher]

@HarbourDesign I found your Laracasts post where you presented this issue. I've left the following comment:

SSR means server-side rendering. This means that when compiling your assets, there is no browser window. This is why you're seeing window is not defined. When using SSR, you're going to want to assign Echo in an onMounted() hook.

@crynobone I'm confident that this issue can be closed since it's not a bug, and is a simple case of user error.