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

[illusory0x0]

I found a solution in

• document how to add new globs to be watched #14423

install vite-plugin-restart.

I hope this helps.

// vite.config.js
import ViteRestart from 'vite-plugin-restart'

export default {
  plugins: [
    ViteRestart({
      restart: [
        './vite.config.ts',
      ]
    })
  ],
}

there are similar issues.

• document how to add new globs to be watched #14423
• Server Watch additional files #14570

[calvin-bj]

Thank you so much for this @illusory0x0 ! I used the reload option instead of restart for my use case (above), as I only required a page refresh, not a full server restart. Steps I took:

1. yarn add vite-plugin-restart -D
2. Add required config to vite.config.ts:

import { defineConfig } from "vitest/config";
import ViteRestart from "vite-plugin-restart";

export default defineConfig({
  plugins: [
    ViteRestart({
      reload: ["docs/openapi.yaml"],
    }),
  ],
});

And now when I save docs/openapi.yaml it reloads the page. Thanks again 🚀

[LukasBombach]

The proposed solutions using either vite-plugin-restart or any watch settings modifications don't work for me within a monorepo. In my case, the clientEntrypoint of addRenderer in Astro's integration api will get pre-build by Vite's Dependency Optimization and not get reloaded anymore until i re-install my deps via my package manager or change my vite config to trigger a rebuild.

I found, however, if I change the reference to the file from a package rerference to a releative path, it will get reloaded:

{
  "astro:config:setup"({ addRenderer }) {
    addRenderer({
      name: "juno-astro",
-       clientEntrypoint: `juno-astro/client.ts`,
+       clientEntrypoint: `${import.meta.dirname}/client.ts`,
    });
  },
}