Vite HMR suddenly reloading full app on every minor save in Vue 3-CodePudding

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"
  }
}

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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