Server setup, vue components are not working

@Sinnbeck , bummer that you cannot see the video :). I believe vimeo account is not needed to view the video, but I do understand that we need to be careful on what links to click, I am the same way :) I opened the console, there were no errors.

@GuntarV sadly it does. It might be active in a while

Video is not rated. Log in to watch.

Could you simply provide a link so we can see for ourselves?

@Sinnbeck, hmm.... I'll figure out how to rate the video on vimeo later, so everybody can see it. Here is a link to that video in oneDrive: https://1drv.ms/v/s!Ag8IMJ0lnM_lkPRxTaLu6gTl-Vcqxg?e=OmyFUg

And I also moved the video to youTube, here is the link: https://www.youtube.com/watch?v=1Gw6rYB6Xps

@GuntarV 204 means no content. the services you are calling doesn't return anything.

Have you connected those apis to your domain?

@Tray2 , that collect 204, is microsoft bing tracking. That I also see on the working server and local dev, I don't think that is the reason the page is not displaying.

@GuntarV I have watched the video but I don't know where I would start if I were to suggest a solution. Without being able to do some actual debugging on the page and compare the two. Also I don't know your code. I notice there is jquery loaded but you say it's vue? And I can't see if the elements are loaded in the elements tab. Maybe is is some css that hides the dom, but it's pure guess work

Is there any page without auth that fails?

One idea though. Compile the dev version of your js and use the browser debugger to step through your code. See if it executes as expected. You can even compare it to local

@Sinnbeck, thank you for suggestions! I will be trying them out.

@GuntarV If you can try compiling the dev on the new server so I can debug, I can have look. I notice the whole <div id="app"> disappears. So something it removing it. In its place comes <!---->

I also can see that the js files are compiled differently. If I compare them they arent the same. Different node versions? Did you try just copying them over?

@Sinnbeck, thank you so much! You put me on the right track. I'll take the first stab at debugging it from here, otherwise I need to reconnect the git with the new site so I can push the recompiled dev.

I will post back with update.

@GuntarV Sounds good :) Hope you can find the issue, and I hope it now makes sense why us having access to stuff makes it easier to help

@Sinnbeck here is a quick update of what I found during debugging

In my app's template file, I have a Laravel's component which contains a Vue component (code snippet below)

<report-list :reports="{{ $reports ?? null }}"></report-list>

Some time ago, when I was testing my app on the new server, I got error saying that variable $reports is undefined So, I added the `?? null' in case that var is undefined, at least there is default value (my first mistake :))

So, the report-list Vue component is expecting an array but received null. I am not sure exactly how, but behind the scenes that is what triggered the <div id="app"> to be removed.

But the real root cause was that on the new server, the Laravel's <report-list :reports="{{ $reports ?? null }}"></report-list> does not see the view component class.

class ReportList extends Component
{
    public $reports = [];

    public function __construct()
    {
        $this->reports = auth()->check() ? Report::forPage() : [];
    }

    public function render()
    {
        return view('components.account.report-list');
    }
}

I do remember in the past I had similar issue when Laravel component didn't see corresponding model. I was not able to figure out one obvious fix, it was always just trying different things and sometime later it started working. I did the cache / view / opcache clearing, sometimes intentionally forced an error and later it started working. Currently on the new server I still have not fixed the component / view class issue.