Inertia setup with ViteJS doesn't detect page changes

[Vercoutere]

I have a pretty straight forward setup of Laravel and InertiaJS (using Vue as the frontend framework) with Vite as the frontend build tool.
Whenever I change my page component, Vite seems to trigger my browser to do a page reload, instead of pushing the changes through hot module reloading. Strangely, the changes in my page component aren't applied either. Doing a manual page refresh in the browser makes no difference, it's as if the component never changed at all. I have to restart the Vite server for the changes to be applied.

This is how things are set up:

// vite.config.ts
import 'dotenv/config';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig(({command}) => ({
    base: command === 'serve' ? '' : '/build/',
    publicDir: false,
    build: {
        outDir: 'public/build',
        rollupOptions: {
            input: {
                client: 'resources/scripts/client.ts',
            }
        },
        manifest: true,
    },
    plugins: [
        vue(),
    ],
    server: {
        hmr: {
            host: 'localhost',
        }
    }
}));

// app/Http/Controllers/TestController.php
<?php

namespace App\Http\Controllers;

use Inertia\Inertia;

class TestController extends Controller
{
    public function __invoke()
    {
        return Inertia::render('Test');
    }
}

// resources/scripts/client.ts
import '../css/client.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

createInertiaApp({
    resolve: async name => {
        return (await import(`./Pages/${name}.vue`)).default;
    },
    setup({ el, app, props, plugin }) {
        const VueApp = createApp({
            render: () => h(app, props),
        });
        VueApp
            .use(plugin)
            .mount(el);
    },
});

// resources/scripts/pages/Test.vue
<script>
export default {
}
</script>

<template>
    <div>
        <h1>Hello world!</h1>
    </div>
</template>

From other resources online I've got the impression this should just work. I've updated all dependencies to the latest versions and done all of the sanity checks I can think of.

Any references to help me get this working would be very much appreciated!

[Vercoutere]

I have also cross-posted this question to the ViteJS Github discussions here: vitejs/vite#6697

[ajnsn]

Hey @Vercoutere

can you please show how you included the frontend assets in your app.blade.php?
Vite needs to access the assets via it's local server to process HMR, e.g.

<script src="http://localhost:3000/@vite/client" type="module"></script>
<script src="http://localhost:3000/resources/js/app.js" type="module"></script>

If the local server is not running, the output here should point to your build files. So you might need some "magic handler" behind the scenes. If you do not care about the details, you could take a look at https://laravel-vite.innocenzi.dev and include in your project.

Hope this helps :)

[Vercoutere]

@ajnsn I did indeed add some backend logic to include the correct script tags depending on the environment. No issue there.

[Vercoutere]

By luck, and a good night's sleep I've stumbled upon the issue myself.

In the client.ts file upon initializing the Inertia instance, I've used a capital for the directory from which to import page components.

return (await import(`./Pages/${name}.vue`)).default;

Fixing this solved the issue.

Having no obvious error made this quite a difficult issue to debug. Hopefully this can help someone else out.