Jetstream w/ Vue HMR not working on child components

I'm building my first Jetstream app, using the Inertia/Vue SSR setup with a Valet server on OSX. The hot module reloading only seems to work on the Page-level components. If a Page-component (Located in resources/js/Pages/) is updated, it shows immediately in the browser. But any changes to the child components of the page don't show up until I restart the whole Vite process. The browser does a reload after I change the file, but the changes don't show up.

I updated my vite config with this so I got the websockets working, might that have something to do with it? https://freek.dev/2276-making-vite-and-valet-play-nice-together

parthjani7

3 years ago

Level 2

Make sure that you have HMR enabled in your Vite configuration. You can do this by setting the hmr option to true in your vite.config.js file:

module.exports = {
    hmr: true,
    ...
};

Apeli

3 years ago

Level 1

This is my vite.config.js:

import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {homedir} from 'os'
import {resolve} from 'path'
import fs from 'fs';

let host = 'tsirp.test'

export default defineConfig({
    hmr: true,
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    ssr: {
        noExternal: ['@inertiajs/server'],
    },
    server: detectServerConfig(host),
});

function detectServerConfig(host) {
    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
    let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)

    if (!fs.existsSync(keyPath)) {
        return {}
    }

    if (!fs.existsSync(certificatePath)) {
        return {}
    }

    return {
        hmr: {host},
        host,
        https: {
            key: fs.readFileSync(keyPath),
            cert: fs.readFileSync(certificatePath),
        },
    }
}```

Apeli

3 years ago

Best Answer

Level 1

Answering myself - I had a typo in one import statement. The initial build when you run "npm run dev" isn't case-sensitive with import statement paths, but the HMR is. I called @/components/Child.vue even though the correct path was @/Components/Child.vue.

Please or to participate in this conversation.