How to enable hot reloading for React with Vite in Laravel

#inertia #laravel

If you use Vite with @vitejs/plugin-react in a Laravel project, there's an easy way to enable hot reloads.

Add this code inside your <head> tag, but before @vite:

@env('local')
<script type="module">
    import RefreshRuntime from "{{ Vite::asset('@react-refresh') }}"

    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {
    }
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
</script>
@endenv

In frontend-only Vite apps, this code gets injected automatically. However, when used in a monolith full-stack framework like Rails, Laravel, Django or else - we have to include a code snippet above.