Vite HMR suddenly reloading full app on every minor save in Vue 3 - vue.js

Question

Stack:
Vue 3 (Options API)
Vite
TailwindCSS
Context:
I've been working on this app for months. If I changed something minor such as a computed property or style, the component would update but the page wouldn't. As of today, suddenly the entire app reloads on every save regardless of what changes, including adding a single whitespace which is removed via auto-format.
New Warning:
Component options are wraped by defineComponent() internally to
support intellisense on IDE for backward compatible, but this is
an hacking which lead to this component type inconsistent with
same script code on .js / .ts. Recommended wrap component options
by Vue.extends() or defineComponent(). Or you can configure
experimentalShamefullySupportOptionsApi: true / false in
vueCompilerOptions property in tsconfig / jsconfig to disable
this warning.
This warning seemingly came out of nowhere and I can't find any information about it online besides a reference to it in the newest Volar relase notes. I've tried downgrading to an older version and then disabling it entirely. This didn't work.
Config
// vite.config.js
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
Note that I use npm run serve which would normally be npm run dev. I swapped them because of muscle memory. This shouldn't be an issue but it's noteworthy.
// package.json
{
...
"scripts": {
"serve": "vite --host",
"build": "vite build",
"dev": "vite preview"
},
"dependencies": {
"#headlessui/vue": "^1.4.1",
"#heroicons/vue": "^1.0.4",
"#popperjs/core": "^2.11.0",
"#tailwindcss/forms": "^0.3.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.6.1",
"#vue/compiler-sfc": "^3.2.6",
"autoprefixer": "^10.3.4",
"postcss": "^8.3.6",
"stylelint-config-recommended": "^6.0.0",
"tailwindcss": "^2.2.15",
"vite": "^2.5.4"
}
}

Answer 1

After several hours of debugging, it turns out that I had NODE_ENV=production leftover from testing last night.

Answer 2

you can try Temporarily disable Volar plugin, it won't show waining tip

Answer 3

I also encountered this problem, and then I disabled the volar plug-in so that there is no longer this warning message, but I do not know z there is no harm

Answer 4

Add the following entry to your project's jsconfig.json and you're good to go:
"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
},
I think it's better than disabling Volar, especially if it's useful for you, because that's not a bug, but a new feature. Check out the changelog for more info:
https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md