Subscribe on changes!

Add build feature flag to enable hydration warnings in production

avatar
Jun 14th 2021

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

avatar
Jul 16th 2021

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