Bringing builder.io's Hydration overlay tool to help us debug hydration mismatch errors on dev environment.
Description
Using withHydrationOverlayWebpack in web pack development configuration allows us to spot hydration mismatches and therefore prevent introducing potencial re-renderings on client and hence, performance issues.
This additional change is necessary to make it work. The hydration mismatch overlay only shows up when it detects errors containing the words hydration or hydrating (see here https://github.com/BuilderIO/hydration-overlay/blob/661aa0e17a50777fe9d7222fe0759d84798b1c3e/packages/lib/src/hydration-overlay-initializer.js#L5 ). Since the app.js script is being served from localhost:8080 whereas the dev server is running on localhost:3000, an error from app.js would be coming from a different origin and pop up as a generic Script error, which would not be captured by hydration-overlay. Hence the requirement for a new dependency html-webpack-inject-attributes-plugin.
jelowin
commented
6 months ago
Bringing builder.io's Hydration overlay tool to help us debug hydration mismatch errors on dev environment.
Description
Using
withHydrationOverlayWebpackin web pack development configuration allows us to spot hydration mismatches and therefore prevent introducing potencial re-renderings on client and hence, performance issues.This additional change is necessary to make it work. The hydration mismatch overlay only shows up when it detects errors containing the words
hydrationorhydrating(see here https://github.com/BuilderIO/hydration-overlay/blob/661aa0e17a50777fe9d7222fe0759d84798b1c3e/packages/lib/src/hydration-overlay-initializer.js#L5 ). Since theapp.jsscript is being served fromlocalhost:8080whereas the dev server is running onlocalhost:3000, an error fromapp.jswould be coming from a different origin and pop up as a genericScript error, which would not be captured byhydration-overlay. Hence the requirement for a new dependencyhtml-webpack-inject-attributes-plugin.Related Issue
Example