Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. Where do I define it?

Since just upgrading vue.js to version 3.4.4 I now get the following warning in the console of my browser:

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.

So I read that it's some new flag they've introduced.

EDIT:

I'm using a vue.config.js file in my project. Is this where the flag should be added? It currently looks like this:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

My question: "Where do I set this flag"? I find a lot of info about that I should define this flag but no info on "where" I should define it...

Solution

If you are using the no longer maintained @vue/cli-service with webpack, it is caused by the fact that the tool does not define the default for this feature flag. It does so for the other two bundler feature flags, and while I created a PR to add this default (as I just hit this myself - https://github.com/vuejs/vue-cli/pull/7443), I do not expect it to get merged and released as the latest release is from July 2022.

So, you should define it yourself in the webpack configuration using the define plugin.

As they question is update to indicate the use of vue.config.js, you can set it like this:

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');

module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        // Vue CLI is in maintenance mode, and probably won't merge my PR to fix this in their tooling
        // https://github.com/vuejs/vue-cli/pull/7443
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
      })
    ],
  },
});

See https://cli.vuejs.org/config/#configurewebpack for details on the configuration options.