jpeters8889

Sorry for double post, I think I've sorted this, turned out to be nothing to do with the files or server. I've got Cloudflare running on production with advanced caching and rocket loader enabled, purged teh cache though cloudflare and disabled rocket loader and now the site renders as expected.

So I've been tearing my hair out for the past few days with a very random Vue issue where for some components it just renders as an empty comment in the DOM, the first culprit I noticed was just a very simple vue component, just some text and a button that displays a modal, and before the past few days everything has worked fine, there's been no changes to the vue components

The wierd thing is that everything is perfectly fine locally, no issues, and I can run npm run prod locally, and there's no issues, so I push to my dev server (Forge / DO droplet) and as part of the Envoyer build process I run npm install and npm run prod, when the build is completed I go to the developmnet site, but then some components don't render, just <!-----> in the DOM, but there's 0 errors in the console, no errors in the build process, and the most confusing thing is thats its fine locally. If I SSH into the dev server and run npm run dev in the current release directory, and refresh the browser, everything is fine, go back to the SSH connection, run npm run prod, refresh, and then the components disapear again.

My first thought was a problem with node or npm versions on the server, so locally I removed the compiled assets from my gitignore, did npm run prod locally, and commited the compiled assets, and then disabled the build step on Envoyer that compiles the assets, push to the dev server, wait for it to deploy, go to the browser, and now none of the vue components on the website are rendering, just empty comments in the DOM, but the compiled javascript files are in my source control, they are the exact same ones as I have locally that work! So once again I ssh into the server, run npm run dev, everythings fine and loads, npm run prod, everything disapears again, and still 0 errors anywhere.

I've spent the past 6 hours today tweaking stuff, stripping components down to the bare bones, putting console.logs in various components mount method and the main mount method of the main app.js file, the console.logs from the app.js appear, but not the ones in the components, I've looked at various places online and can't find anything that matches my issue, even enabled vue devtools in production, which on the dev server only showed the main root element, none of the other components on the page.

Eventually, after reverting my components to how they were before I stipped stuff out earlier, I did rm -rf node_modules && rm package.lock locally and did a fresh npm install and then npm run dev, which was fine, did npm run prod, commited and pushed to my dev server, and miraculously went to the dev site, and everything worked, everything was fine, no issues whats so ever, so I browse the site, test all the key functionality, no problems, so think I've finally got it, merge into master, push to master, open the browser, and what d'you know, there's no vue components rendering, now the compiled assets are the exact same across 3 environments, local, dev and prod, its now working in two out of three. Anyway, I quickly revert the commit to master to get the live site back working, and then go to envoyer and get it to build the master branch to my dev server, and that displays fine with no issues, its a very odd issue.

Technical details, I've got Laravel mix 6.0.10, Vue 2.6.12, until the past few days the site and components have been fine for months, this issue started happening recently, first time I noticed it was when I wrapped a vue component referenced in a blade file in a parent div, when i pushed to dev thats the first time the issue happened, obviously I removed the wrapping div straight away thinking that was the issue, but it made no difference, the site is Laravel 8 with Blade, and sprinkles of Vue components for additional functionality, some pages are completley vue apart from the blade header and footer, others are completley blade. The main app.js file is chunked using dynamic imports and the chunks are prefetched using Spatie's laravel prefetch package

Great video, it'd be nice if you could do more 'unscripted' videos like this where you're just playing around, making tweaks, making mistakes etc

Also, 42 minutes, laracasts longest video record? 🤣