False positives with MUI library

[SLMNBJ]

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()

[samijaber]

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]

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

It looks like the left side has a big Emotion <style> tag: we could potentially remove those from the SSR to simplify things...although the hydration mismatch could potentially be IN the emotion tag too 😅

[SLMNBJ]

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?

[samijaber]

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