404 error on livewire.min.js when APP_DEBUG is set to false
Hi! I just put my website in production and all is working well except one small issue.
When I set my APP_DEBUG value to false in the .env and then visit my website, I get a 404 error for livewire.js which renders some of the features non functional. It's looking for the file in website.com/livewire/livewire.min.js?id=5d8beb2e.
This is happening on the whole website and I'm not sure what could be causing it. Any idea? Whenever I switch back
APP_DEBUG, it's working normally again.
Ok so turns out there's a big red warning about this problem at the top of the Livewire documentation. I tried to configure Nginx like they suggest but it didn't work.
What worked is compiling the JS Livewire assets manually, so replacing @livewireScripts by @livewireScriptConfig in my layout file, and then importing it like this in my JS file:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
Livewire.start()
The original poster did say whether or not their site was hosted in a directory -- our organization hosts multiple sites on one server and so all sites live within a different path on the same domain. This was causing us pain.
The fix ended up being to put this in our app/Providers/AppServiceProvider.phpboot() method:
// Get the path to our application and stick it in front of the livewire update path
Livewire::setUpdateRoute(function ($handle) {
$path = parse_url(config('app.url'))['path'] ?? '';
return Route::post($path.'/livewire/update', $handle);
});
Livewire::setScriptRoute(function ($handle) {
$path = parse_url(config('app.url'))['path'] ?? '';
// When .env has APP_DEBUG=true we need to use livewire.js and when APP_DEBUG=false we need to use livewire.min.js
// Got the idea for this from: https://laracasts.com/discuss/channels/livewire/app-debug-to-false-causes-a-404-error-on-livewirejs?page=1&replyId=950404
$livewire = config('app.debug') ? 'livewire.js' : 'livewire.min.js';
return Route::get($path.'/livewire/'.$livewire, $handle);
});