I have a vue project that uses vite to build the app, which produces a dist/index.html file that includes a tag that references an index-.js file. The site works as expected, however for browsers that are configured to re-open the previous tabs, a blank page always appears with these steps,

• Open site in browser
• Close browser window
• Change the source
• Rebuild with vite build
• Re-open browser

Manually refreshing the browser displays the page correctly. This behavior is seen with Chrome, Brave and Edge, but not with Firefox. (Current Windows versions). It looks like the index.html file is not reloaded and thus cannot find the previous index-.js file. The browser console reports the error,

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

The vite.config.js file is

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue ()],
  server: {
    watch: {
      usePolling: true
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

The jsconfig.json file is

{
  "include": ["src/**/*", "src/**/*.vue", "tests" ],
  "exclude": [ "dist" ],
  "compilerOptions": {
    "baseUrl": ".",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "types": [ "vite/client" ],
    "paths": {
      "@/views/*": [ "./src/views/*" ],
      "@/components/*": [ "./src/components/*" ],
      "@/*": [ "./src/*" ]
    }
  }
}

I have searched the web and reviewed vite and vue documentation, but have not seen anything directly relating to this problem. It will not be possible to train everyone who uses this site to just refresh the browser, and a blank screen will be problematic for user support as intended users are not tech savvy.

I can configure vite to not build hashed files and add a section to the vite.config file like,

  build: {
    rollupOptions: {
      output: {
          entryFileNames: `[name].js?v=${version}`,
          chunkFileNames: `[name].js?v=${version}`,
          assetFileNames: `[name].[ext]?v=${version}`
      }
    }
  }

but I’m hoping there are best-practices that prevent this problem and allow a new hash on build.