TypeError: Cannot read properties of null (reading 'scrollTop') Material UI

Question

I have migrated MUI-4 to MUI-5 and facing this error. Any Help?

Petronille

Answer 1

I discovered that I was feeding my own component inside the SnackBar. When I wrapped the content of SnackBar in a div, it was fixed. As the error message says "Expected an element that can hold a ref," SnackBar's child needs to be an element that can hold a ref, e.g. a div.

Before: <SnackBar> <MyAlert/> </SnackBar>

After: <SnackBar><div> <MyAlert/> </div> </SnackBar>

Thanks

Petronille

Absolutely bang on. Thank you. – Savagism

Answer 2

I faced this error when I used animation components like <Fade> | <Slide> | <Grow>. I didn't had a troubles in react component, but in jest when I tested react components that used listed above components from MUI.

For prevent this error I used jest.mock:

jest.mock('@mui/material/Fade', () =>
    forwardRef(function FadeRef({children, ...other}: FadeProps, ref: ForwardedRef<HTMLDivElement>) {
        return (
            <Box ref={ref} {...other}>
                {children}
            </Box>
        );
    }),
);

Maybe it will help someone.

Thibodeaux