What is the purpose of build.watch.include and how do I configure vite to watch other files?

[smac89]

I thought I could use this to watch the vite.config.ts file so that everything reloads when that file changes, but it actually doesn't trigger any changes.

My config file:

import { defineConfig, type UserConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(async ({ mode }): Promise<UserConfig> => {
    ...
    return {
        define: {
            __SCHEDULE_API_URL__: JSON.stringify(
                process.env.SCHEDULE_API_URL ?? "http://localhost:5000"
            ),
        },
        plugins: [
            tsconfigPaths(),
            ...
        ],
        build: {
            sourcemap: mode === "development",
            watch: {
                buildDelay: 500,
                include: ["./vite.config.ts"], // <- here...
            },
        },
        ...
    };
});

To build and watch, I use the command: vite build --mode='development' --watch.

What am I missing? How do I tell vite to watch other files in the project directory and trigger a rebuild when they change?

[calvin-bj]

I have this problem too - I have a mock API yaml file which I want to cause a reload on the frontend in dev mode.

I found this in the docs: https://vite.dev/config/build-options.html#build-watch -> https://rollupjs.org/configuration-options/#watch-include
It has this note:

"Note that this only filters the module graph but does not allow adding additional watch files"

I'm not sure how to solve this. But it shows that using build.watch is not the way to do this.

Related SO answer here: https://stackoverflow.com/a/63548394/9889773