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

Question

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...

Update @vitejs/plugin-vue to v5 or above. You don't need to define it manually if you're not using it. — brc-dd
– brc-dd, Commented Jan 3, 2024 at 15:27
@brc-dd I can't seem to find this file. Where would it be located? Or maybe it's not part of my project. — Toby Fieldgroove
– Toby Fieldgroove, Commented Jan 8, 2024 at 14:05
Ah you're still using webpack. Do it like this - vuejs.org/api/compile-time-flags#webpack — brc-dd
– brc-dd, Commented Jan 8, 2024 at 14:18
Ah my bad, you're using cli-service. It should be this one - vuejs.org/api/compile-time-flags#vue-cli — brc-dd
– brc-dd, Commented Jan 8, 2024 at 18:19

Mitya · Accepted Answer · 2024-12-05 16:38:42Z

24

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 the 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.

edited Dec 5, 2024 at 16:38

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

answered Jan 5, 2024 at 13:45

Bob van de Vijver

3,0712 gold badges17 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Toby Fieldgroove Over a year ago

Thx, it is probably so that I use the vue/cli-service. I have a vue.config.js file, see my updated post on top. I've tried defining the flag inside of the "defineConfig"-method but that didn't help. Possibly I did it incorrectly. Would you have a suggestion on how to edit my vue.config.js to make it work? Thx!

Toby Fieldgroove Over a year ago

This did the trick, also I realized after a while that I also had to rebuild after changing the vue.config.js file because just saving it and reloading the vue-app in the browser was not enough :)

Randy Hall Over a year ago

Same issue, but wondering if there's something I should replace vue/cli-service with if it's no longer maintained?

Bob van de Vijver Over a year ago

@RandyHall From the documentation: "Vue CLI is the official webpack-based toolchain for Vue. It is now in maintenance mode and we recommend starting new projects with Vite unless you rely on specific webpack-only features. Vite will provide superior developer experience in most cases.". See vuejs.org/guide/scaling-up/tooling.html.

Randy Hall Over a year ago

@BobvandeVijver thanks! Upgraded my project to Vite, fixed a lot of problems.

snoob dogg · Accepted Answer · 2024-05-17 20:37:47Z

5

If your vue project use Vite, update Vite and @vitejs/plugin-vue

answered May 17, 2024 at 20:37

snoob dogg

2,9614 gold badges40 silver badges69 bronze badges

1 Comment

snoob dogg Over a year ago

if your project use vue-cli, your project should use vite

Ahmad Mahmudi · Accepted Answer · 2024-05-15 03:00:45Z

3

For me, need to install webpack first

npm install webpack --save-dev

after installation, edit vue.config.js file

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

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': JSON.stringify(false),  
// Replace with true if detailed mismatch info is needed
        '__VUE_OPTIONS_API__': JSON.stringify(true),
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false',
      })
    ],
  },
})

answered May 15, 2024 at 3:00

Ahmad Mahmudi

312 bronze badges

1 Comment

snoob dogg Over a year ago

but the best is to migrate to Vite so you don't need webpack at all.

yuhenabc · Accepted Answer · 2024-10-24 05:14:24Z

1

If you use vite, use define instead.

export default defineConfig({
  define: {
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
  }
});

answered Oct 24, 2024 at 5:14

yuhenabc

213 bronze badges

Comments

TTook · Accepted Answer · 2024-06-05 16:34:24Z

0

An additional way to add the required webpack plugin described by Bob van de Vijver's accepted answer is to use chainWebpack instead of configureWebpack.

Since my project was already using chainWebpack, I just added it like this:

const {DefinePlugin} = require('webpack');
module.exports = {
    // other configs
    chainWebpack: config => {
      config.plugin('add_flag')
          .use(DefinePlugin, [{
              __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
          }]);
      // other chainWebpack changes
    },
};

answered Jun 5, 2024 at 16:34

TTook

588 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

5 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related