Ignore coverage HTML files from Vite + React HMR

Question

I have a project set up using vite with the @vitejs/plugin-react extension. I'm using the basic config of

export default defineConfig({
  plugins: [react({ include: ['src'] })]
})

In the dev server output I'm seeing page reloads of my coverage HTML files, for example

8:09:45 PM [vite] page reload coverage/lcov-report/App.tsx.html

My coverage files are located in the project root with a directory of coverage. I've tried a number of settings in the Vite config, such as

optimizeDeps: {
  entries: ['index.html'],
  exclude: ['coverage']
}

and

server: {
  watch: {
    exclude: ['coverage']
  }
}

however neither of these seem to have any effect. I also tried the following on the React plugin itself

exclude: /coverage/

but no dice. I would expect that a path like coverage would be excluded by default.

Vituperation

Answer 1

This worked for me:

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

Apiculate

Either I'm blind, or this wasn't in the documentation before. Thanks! – Vituperation

Or rather than '**/coverage/** you can do path.resolve(__dirname, './coverage') to ignore only the top level coverage folder – Panier

Answer 2

I found this to be a consequence of Storybook's internal Vite server being reconfigured on the fly and overriding the base configuration for Vite described above.

In addition to

server: {
  watch: {
    exclude: ['coverage']
  }
}

in vite.config.ts I also had to configure the following in .storybook/main.ts:

import { InlineConfig, mergeConfig } from 'vite'

const config: StorybookConfig = {
  /* ... */
  viteFinal: (config: InlineConfig) => mergeConfig(config, {
    server: {
      watch: { ignored: ['**/coverage/**'] },
    },
  }),
  /* ... */
}

Asceticism