[Masonry] Check if container or child exists to prevent error

[hbjORbj]

• I have followed (at least) the PR section of the contributing guide.

Closes #29362
Closes #29446

Problem:

• Uncaught TypeError: Cannot read properties of null (reading 'clientWidth') at ResizeObserver.handleResize
• code sandbox

Solution:

• Make the following change at the start of handleResize() in order to prevent Cannot read properties of null error.

diff --git a/packages/mui-lab/src/Masonry/Masonry.js b/packages/mui-lab/src/Masonry/Masonry.js
index 73bc1e166d..e127668cd7 100644
--- a/packages/mui-lab/src/Masonry/Masonry.js
+++ b/packages/mui-lab/src/Masonry/Masonry.js
@@ -184,6 +184,9 @@ const Masonry = React.forwardRef(function Masonry(inProps, ref) {
 
   React.useEffect(() => {
     const handleResize = () => {
+      if (!masonryRef.current || !masonryRef.current.firstChild) {
+        return;
+      }
       const parentWidth = masonryRef.current.clientWidth;
       const childWidth = masonryRef.current.firstChild.clientWidth;
       const firstChildComputedStyle = window.getComputedStyle(masonryRef.current.firstChild);

• code sandbox

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 70f5d59

[siriwatknp]

I think it is cheaper to do unit test. You can do something like

it('should not throw if children are empty', () => {
  expect(() => render(<Masonry columns={3} spacing={1} />)).not.to.throw()
})

[hbjORbj]

Always love your code review, Jun.

[siriwatknp]

👍 Nicee

[hbjORbj]

Code sandboxes proving that this PR fixes
(1) the first issue: Uncaught Type Error is thrown on renders

• before: https://codesandbox.io/s/basicmasonry-material-demo-forked-vrctz
• after: https://codesandbox.io/s/basicmasonry-material-demo-forked-s6rzh?file=/package.json

(2) the second issue: Uncaught Type Error is thrown when switching between pages

• before: https://codesandbox.io/s/6gw4k
• after: https://codesandbox.io/s/zen-dream-wz5us?file=/src/Page1.tsx

[mnajdova]

Check if the changes need to be applied in the other components that use the ResizeObserver.

[rgcl]

Please approve this 🥺

[brusacco]

I'm still having this error in NextJS using the Link component, when I use just a simple ahref there are no problems.

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'clientWidth')

Call Stack
ResizeObserver.handleResize
node_modules/@mui/lab/Masonry/Masonry.js (171:0)

[hbjORbj]

@brusacco Thanks for the report. Can you provide a codesandbox please? You can fork this template: https://codesandbox.io/s/mui-issue-latest-s2dsx

[netlifeapp]

Still happening on NextJS, i solved it by adding skeleton component:
<Masonry>{some.state?(masonryitems):(<Skeleton />)}</Masonry>

[hbjORbj]

@netlifeapp

It doesn't look like this bug report has enough info for one of us to reproduce it.
Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve