CODEWITHSUNDEEP
vitehot-module-replacement
knueser
knueser

Reputation: 437

Ignore coverage HTML files from Vite + React HMR

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.

Upvotes: 7

Views: 3183

Answers (2)

pospi
pospi

Reputation: 3580

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/**'] },
    },
  }),
  /* ... */
}

Upvotes: 1

Gerard de Brieder
Gerard de Brieder

Reputation: 549

This worked for me:

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

Upvotes: 10

Related Questions