refresh config overwritten by server

[jeff-h]

Vite Plugin Version

0.7.8

Laravel Version

10.9.0

Node Version

19.8.1

NPM Version

9.5.1

Operating System

macOS

OS Version

13.3.1

Web browser and version

Brave Version 1.51.114 Chromium: 113.0.5672.92 (Official Build) (arm64)

Running in Sail?

No

Description

I'm using Indigo which generates an SSL cert for my site. I've followed the instructions at Working With A Secure Development Server by adding a server section to my config, specifying the paths to my key and cert.

This works fine, but appears to have an unintended consequence causing Vite to watch the entire project, not just the paths that it should.

Any time a file is added/deleted (but not when a file is changed) in any directory of the entire project, Vite triggers a reload. Amongst other issues, this caused an infinite reload when my project wrote to storage/debugbar.

I can fix that specifically by adding a watch config inside the server section like so:

server: {
    ...
    watch: {
        ignored: [
        '**/storage/**',
    ],
},

but I'd much rather it just watch the proper paths.

Is this a one-off misconfiguration in my project, or is it a bug in how Vite-plugin merges its config?

My `vite.config.js`:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vuePlugin from '@vitejs/plugin-vue2';
import fs from 'fs';

const host = 'mysite.test';

export default defineConfig({
    server: {
        host,
        hmr: { host },
        https: {
            key: fs.readFileSync(`/Users/me/.indigo/ssl/key.pem`),
            cert: fs.readFileSync(`/Users/me/.indigo/ssl/cert.pem`),
        },
        watch: {
            ignored: [
              '**/storage/**',
            ],
        },
    },

    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vuePlugin({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,

                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],

    resolve: {
        alias: {
            // '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
            vue: 'vue/dist/vue.esm.js',
        }
    },

});

Steps To Reproduce

1. Ensure there's a key and cert file available for your site.
2. Configure Vite as specified.
3. Start Vite: npm run dev
4. add or delete a file anywhere in the project eg cp README.md DUMMY.md
5. Vite will trigger a page reload

[jeff-h]

Let me know what further info I should provide and I'll gladly add it.

[driesvints]

@jeff-h waiting on Jess and Tim to confirm and triage.

[timacdonald]

@jeff-h can you please set refresh: false and let us know if the issue occurs even when the refresh plugin is disabled?

I was unable to replicate the issue with a fresh installation and the following configuration. Editing the views refreshed the page as expected. cp README.md DUMMY.md did not trigger a refresh nor did editing files in storage.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import fs from 'node:fs'

const host = 'vite-issue.test';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host,
        hmr: { host },
        https: {
            key: fs.readFileSync(`/Users/tim/.config/valet/Certificates/vite-issue.test.key`),
            cert: fs.readFileSync(`/Users/tim/.config/valet/Certificates/vite-issue.test.crt`),
        },
    },
});

If you could provide a minimum reproduction repository for us that replicates the issue, we can look into this further.

Thanks.

[jeff-h]

I believe I have discovered the cause; in a completely clean Breeze & Blade site, if you add the following to app.js (as per https://laravel.com/docs/10.x/vite#blade-processing-static-assets) it works fine:

import.meta.glob([
    '../images/**',
    '../fonts/**',
]);

cp README.md DUMMY1.md — no reload triggered.

If you add an exclusion (as per https://vitejs.dev/guide/features.html#negative-patterns) it exhibits the undesired behaviour.

import.meta.glob([
    '../images/**',
    '../fonts/**',
    '!**/bar.js',
]);

cp README.md DUMMY2.md — a reload is triggered, and should not be.

[timacdonald]

Edited.

@jeff-h After investigation, I can confirm that it is not the Laravel plugin triggering the refresh, but Vite itself. You can see the issue on the Vite repo: vitejs/vite#13374

[jeff-h]

Thanks @timacdonald — really appreciate your time digging into this!

[timacdonald]

No troubles at all.