hydration-overlay icon indicating copy to clipboard operation
hydration-overlay copied to clipboard

False positives with MUI library

Open SalmenBejaoui opened this issue 2 years ago • 4 comments

I'm using Next.js (v13 with pages directory) with the MUI library. In the case of error Hydration, it's hard to debug compared to native modal error and seems not to have the same value. Here is an example. I just added Math.random()

Screen Shot 2023-12-15 at 21 26 40 Screen Shot 2023-12-15 at 21 26 48

SalmenBejaoui avatar Dec 15 '23 20:12 SalmenBejaoui

It looks like MUI renders inline styles in SSR, but uses classnames in CSR, which causes this mismatch. Not sure how to approach hiding these false positives... 🤔

samijaber avatar Jan 02 '24 18:01 samijaber

Actually: could you provide the full diff here? Before and After?

It looks like the left side has a big Emotion

samijaber avatar Jan 02 '24 18:01 samijaber

Here is the BUILDER_HYDRATION_OVERLAY object. BUILDER_HYDRATION_OVERLAY object.json

If the problem is with the emotion tag, I should have the problem first too, right?

SalmenBejaoui avatar Jan 02 '24 21:01 SalmenBejaoui

If the problem is with the emotion tag, I should have the problem first too, right?

If by "first" you mean "before using this hydration overlay", then no. The reason we get false positives is explained here: https://github.com/BuilderIO/hydration-overlay/?tab=readme-ov-file#caveats

samijaber avatar Jan 03 '24 15:01 samijaber