Quasar VUE_PROD_HYDRATION_MISMATCH_DETAILS is not defined

Question

Im using quasar together with Vite. After installing quasar with yarn create quasar I get the following warning in the console.

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
 You are running the esm-bundler build of Vue, which expects these 
compile-time feature flags to be globally injected via the bundler 
config in order to get better tree-shaking in the production 
bundle.

How can I get rid of it? I cannot find any information on where I shall define this in Quasar Framework

Answer 1

This warning starts appearing after upgrading to Vue 3.4 without upgrading all other required dependencies, namely @vitejs/plugin-vue, which should be upgraded to ^5.0.0. This is documented under Potential Actions Needed when upgrading to Vue 3.4.

With Quasar, you can not upgrade this package directly since it's not a top-level dependency of Quasar projects. Until the Quasar team releases an update, you will need to set the flag yourself

quasar.config.js

build: {
  extendViteConf(viteConf) {
    viteConf.define.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
  },
}