Nuxt.jsでFeature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
今回はNuxt.jsを使用しているときにコンソールに下記のwarningが出たときの対処法についてお伝えしていきます。
|
1 |
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. |
Nuxt.jsのバージョンは3.11.2です。
Nuxt.jsでFeature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.
結論を言うとnuxt.config.jsなどに下記のような定義を入れると私の場合はwarningが出なくなりました。
|
1 2 3 4 5 6 7 8 |
// nuxt.config.js export default defineNuxtConfig({ vite: { define: { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, } } }); |
メンテナンスされなくなった @vue/cli-serviceをWebpackで使用している場合、ツールがこの機能フラグのデフォルトを定義していないことが原因でコンソールにwarningが起こるようです。
自分で明示的に定義してあげれば、ひとまずwarningが出ることは抑えられます。
終わりに
今回はNuxt.jsを使用しているときにコンソールに冒頭のようなwarningが出たときの対処法についてお伝えいたしました。