This error appears to have surfaced after the upgrade to react 18. It looks like this:
Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
I think this is happening due to the Masonry component which dynamically calculates column widths after hydration but Next's Image component sets styles server side. The error occurs because Masonry changes the layout and the Image components styles change on the first render. Anecdotally, the error is difficult (impossible?) to reproduce on screen widths where the column count isn't increased/decreased on the first render.
This error appears to have surfaced after the upgrade to react 18. It looks like this:
I think this is happening due to the
Masonrycomponent which dynamically calculates column widths after hydration but Next'sImagecomponent sets styles server side. The error occurs becauseMasonrychanges the layout and theImagecomponents styles change on the first render. Anecdotally, the error is difficult (impossible?) to reproduce on screen widths where the column count isn't increased/decreased on the first render.