vue 3.4 warning about __VUE_PROD_HYDRATION_MISMATCH_DETAILS__

[MartinX3]

Should I add the flag (default value false) or will a new quasar release handle this?
I assume a new release will handle it.

According to https://vuejs.org/api/compile-time-flags.html#vue-prod-hydration-mismatch-details @vitejs/plugin-vue automatically provides default values for these flags, which is a dependency of @quasar/vite-plugin.

Currently my browser shows me

Feature flag __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.

For more details, see https://link.vuejs.org/feature-flags.
initFeatureFlags @ chunk-KVCJOJ4M.js?v=fcd821a8:6500

[DouglasCalora]

I think we have to wait until quasar upgrade

[topvis]

I did this in quasar.config.js to let the warning go:

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

[jaalders]

I don't know if this is the best, or fully correct way to solve the issue, please offer some guidance if so, but I was able to fix this error by adding the following lines of code within the quasar.config.js file

Under const { configure } = require('quasar/wrappers');

Add: const webpack = require('webpack');

Within the 'build: {}' section, add the following:

chainWebpack(chain) {
        chain.plugin().use(webpack.DefinePlugin, [
          {
            __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
          },
        ]);
      },

Hope this helps!

[cap1024]

Add to quasar.config.js:

build: {
    rawDefine: {
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
    },
},

[rstoenescu]

Please upgrade to q/app-webpack 3.12.2 or q/app-vite 1.7.2

[David1215225]

[email protected]

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
define: {
VUE_PROD_HYDRATION_MISMATCH_DETAILS: 'true'
}
})