Add build feature flag to enable hydration warnings in production
What problem does this feature solve?
I'm currently debugging a hydration bug in my code that only appears in my production builds (a specific node gets duplicated whenever NODE_ENV=production
). However since hydration warnings are disabled in production, it's very difficult/tedious to manually find and add proper breakpoints.
What does the proposed API look like?
A build time variable like __VUE_PROD_HYDRATION_WARNINGS__
that allows hydration warnings to show up in production builds would be much appreciated
I finally figured out why I was getting hydration errors only in production. My build script was NODE_ENV=production webpack --config webpack.config.client.ts && webpack --config build/webpack.config.server.ts
but I forgot shell only exports the NODE_ENV
variable to the first command.
As a result, I was compiling my Vue SFCs with vue-loader
in development mode for my server bundle but in production mode for my client bundle. Since vue-loader runs its own optimizations on SFC's <template>
tags (e.g. removing html comments), the mismatch caused my hydration errors.
For anyone that needs to debug production hydration errors, you can open node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
and manually remove/edit the process.env.NODE_ENV !== 'production'
guards