Wave working locally with Valet but broken Livewire on production Nginx
Hi Bobby,
Hope you're well! Today I tried deploying the app that I've been building with Wave on an EC2 instance running Ubuntu 22.04 and Nginx.
I've developed several Livewire components for this app. All of them seem to be working absolutely fine locally with Valet. However, all hell breaks loose when I deploy it in production. The components seem to work on the very first load of the pages where they are included (immediately after deployment) but any subsequent page load returns the following error:
net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
caught (in promise) TypeError: Failed to fetch
I have tried fixing it but can't figure out where to begin. Whenever I use the config:clear and cache:clear commands, Livewire again works on the first load and fails on all subsequent loads.
Please help!
Thanks!
Hi there,
It sounds like either an Nginx or a PHP configuration problem. Can you share your complete Nginx server block here?
Also, do you see any errors in the Nginx error log or the PHP error logs?
1
You're truly a live-saver, Bobby! It was a PHP-FPM thing! Fixed.
Thank you so much! Have a wonderful day!
P.S., if I could ask another question in this thread, the avatar/image uploader on the Profile Settings page is giving me a hard time with JPEGs. I upload a really small JPE?G file (less than 1MB) and it automagically turns it into a 4.2 MB file and then loads it on the frontend, making everything sloooow.
I think there is some image encoding issue here. Where should I look?
Thanks again!
1
No problem at all! Happy to hear that you've got it all working!
Regarding the profile image problem, that is a very interesting finding! I think that this might be due to the image resizer during the upload, as the image gets encoded and probably something goes wrong with JPEG files:
If you have a chance can you share an example image that you are testing this with that I can try out as well?
Hi Bobby,
Thanks for the quick response! Tried DMing you but that didn't work so sending you another file that I tested again to see it has the same issue and guess what? It grew fatter almost 4X! (the same as the original image that I spotted the issue with).
https://drive.google.com/file/d/1mFFXLkNSJSGdwjri_j11Hcy7xyFjno7r/view?usp=sharing
Please see what you can find.
Thanks again for looking into it!
P.S. Is it only me or it's happening with everybody else? When I try submitting my followup responses here for the first time, the submit button doesn't work but when I reload the page and submit the response again, it goes through.
Thank you for the additional details!
I think that the problem is that the jpeg gets converted into a PNG file, my test with your file resulted in the following:
49K - katchni-style-madhubani.jpeg
307K - wave-profile-image-test.png
So nearly 8x the size, are you seeing the same behavior?
A quick fix is to disable the crop popup for the profile image so that the actual image is uploaded rather than the cropped PNG.
I'll try to look into a better solution but if we want to keep the crop functionality it might be a tough one.
I'll look into that submit button problem!
1
Great observation, Bobby! I totally ignored the .png extension and kept wondering why the file size increase was that much!
Thank you for suggesting the quick fix, although it would be great if the cropping feature actually worked without this conversion. Please let me know when you come up with a better solution for this.
As for the size, I tried uploading the same file again. The actual size difference this time was 6.6x.
Just a quick follow up here. For the moment, if you don't want to see that image size increase, it's best to disable the crop functionality. We will keep this in mind for Wave v3!