How to enable hot reloading in DEV environment when using inertia

[mhmmdtech]

I followed this issue #1532 and solved many challenges to integrate inertia and this package but now I am having trouble with hot reloading while I am developing and would appreciate your help.

app.jsx file

import '../css/app.css';
import './bootstrap';

import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot, hydrateRoot } from 'react-dom/client';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
		const [module, page] = name.split('::');

        const pagePath = module
        ? `../../Modules/${module}/resources/assets/js/Pages/${page}.jsx`
        : `./Pages/${page}.jsx`;

        const pages = module
        ? import.meta.glob('../../Modules/**/resources/assets/js/Pages/*.jsx')
        : import.meta.glob('./Pages/**/*.jsx');

		if (!pages[pagePath]) {
			const errorMessage = `Page not found: ${pagePath}`;
			throw new Error(errorMessage);
		}

        return resolvePageComponent(
            pagePath,
            pages,
        );
    },
    setup({ el, App, props }) {
        if (import.meta.env.SSR) {
            hydrateRoot(el, <App {...props} />);
            return;
        }

        createRoot(el).render(<App {...props} />);
    },
    progress: {
        color: '#4B5563',
    },
});

vite.config.js file

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
    ],
});

vite.config.js file in each module (Default):

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { readdirSync, statSync } from 'fs';
import { join,relative,dirname } from 'path';
import { fileURLToPath } from 'url';

export default defineConfig({
    build: {
        outDir: '../../public/build-auth',
        emptyOutDir: true,
        manifest: true,
    },
    plugins: [
        laravel({
            publicDirectory: '../../public',
            buildDirectory: 'build-auth',
            input: [
                __dirname + '/resources/assets/sass/app.scss',
                __dirname + '/resources/assets/js/app.js'
            ],
            refresh: true,
        }),
    ],
});

[mhmmdtech]

I was using the Laravel Sail package and it seems that there is a bit of a challenge for hot reloading in the WSL environment and I tried to mess with it but unfortunately it didn't work. So I use the composer run dev command to start the project and I regretted using Laravel Sail in this situation.