It seems like the issue you're experiencing with the page refresh when submitting a Livewire form while running Laravel Vite with npm run dev might be related to how Vite handles HMR (Hot Module Replacement) and how Livewire is trying to prevent the default form submission behavior.
Here are a few steps you can take to troubleshoot and potentially solve the issue:
-
Ensure Livewire Scripts are Loaded Correctly: Make sure that you have included
@livewireScriptsin your blade layout or specific blade file where you're using Livewire components. -
Check for JavaScript Errors: Open your browser's developer console and check for any JavaScript errors that might be preventing Livewire's scripts from intercepting the form submission.
-
Verify Livewire Component Setup: Ensure that your Livewire component is set up correctly and that the
saveEnvmethod is being called without any issues. -
Examine Network Requests: Use the network tab in your browser's developer tools to inspect the XHR requests when you submit the form. Livewire should make an AJAX request without a full page reload.
-
Disable HMR Temporarily: Try running Vite without HMR to see if the issue persists. You can do this by modifying your Vite configuration to disable HMR or by using the
--forceflag when runningnpm run dev. -
Check for Conflicts with Middleware: Since you've added the
setupmiddleware to the Livewire update route, ensure that there are no conflicts or unintended redirects happening as a result of this middleware. -
Livewire Event Listeners: Livewire offers a way to listen for browser events and take actions accordingly. Ensure that there are no event listeners that might be causing the page to refresh.
-
Update Livewire and Vite: Ensure that you are using the latest versions of Livewire and Vite, as updates may contain bug fixes that could resolve your issue.
If none of these steps resolve the issue, you might want to consider creating a minimal reproduction of the problem and submitting it to the Livewire GitHub repository or the Vite GitHub repository for further assistance from the community.
Here's a minimal example of how your Livewire component and form should generally look:
// In your Livewire component
public $envContent;
public function saveEnv()
{
$this->validate([
'envContent' => 'required', // Add your validation rules here
]);
try {
file_put_contents($this->envPath, $this->envContent);
session()->flash('message', 'Environment settings saved successfully.');
} catch (Exception $e) {
$this->hasError = true;
session()->flash('error', 'Failed to save environment settings.');
}
$this->finalizeInstallation();
}
{{-- In your Blade view --}}
<form wire:submit.prevent="saveEnv">
@csrf
<label for="envContent">
<h3 class="text-slate-600 dark:text-slate-400 font-bold mb-2">Env file content:</h3>
</label>
<textarea id="envContent" name="envContent" rows="4" class="block p-4 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 min-h-[450px]" wire:model="envContent"></textarea>
<button type="submit">Save</button>
</form>
@livewireScripts
Remember to include @livewireStyles in the head of your Blade layout and @livewireScripts before the closing body tag to ensure Livewire's styles and scripts are loaded correctly.