TypeError null is not an object (evaluating 'e.scrollTop')

[l-you]

Duplicates

• [x] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I have dashboard. When I go to another app (Viber in my case), then go back to Safari dashboard is already broken and have throws error in one of my chunks: "TypeError null is not an object (evaluating 'e.scrollTop')".

Here is come code from bundle. I use Fade components actively.

43853: function(e, t, n) { "use strict"; n.d(t, { Z: function() { return i } }); var r = n(37870), o = n(49957); function i({props: e, name: t}) { return (0, r.Z)({ props: e, name: t, defaultTheme: o.Z }) } }, 72579: function(e, t, n) { "use strict"; n.d(t, { C: function() { return o }, n: function() { return r } }); const r = e => e.scrollTop; function o(e, t) { var n, r; const {timeout: o, easing: i, style: a={}} = e; return { duration: null != (n = a.transitionDuration) ? n : "number" === typeof o ? o : o[t.mode] || 0, easing: null != (r = a.transitionTimingFunction) ? r : "object" === typeof i ? i[t.mode] : i, delay: a.transitionDelay } } },

Expected behavior 🤔

A week ago everything worked perfectly.

Steps to reproduce 🕹

Steps:

1. Open dashboard built with mui in Safari
2. Go to viper for a some time, download images/watch videos.
3. Go back to Safari
4. You will see an error catch with

Context 🔦

Error related to transition components. I can provide more code from that chunk. In development environment everything works as expected. Problem appeared last week. I actively update my packages.

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 12.4 Binaries: Node: 18.4.0 - /opt/homebrew/bin/node npm: 8.12.1 - /opt/homebrew/bin/npm Browsers: Chrome: Not Found Edge: Not Found Firefox: Not Found Safari: 15.5 npmPackages: @emotion/react: 11.9.3 @emotion/styled: 11.9.3 @mui/base: 5.0.0-alpha.88 @mui/icons-material: 5.8.4 @mui/lab: 5.0.0-alpha.89 @mui/material: 5.8.7 @mui/private-theming: 5.8.6 @mui/styled-engine: 5.8.7 @mui/system: 5.8.7 @mui/types: 7.1.4 @mui/utils: 5.8.6 @mui/x-date-pickers: 5.0.0-alpha.1 @types/react: 18.0.15 react: 18.2.0 react-dom: 18.2.0 typescript: 4.7.4 ```

[mnajdova]

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

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[l-you]

I've done some research. Error thrown here. https://github.com/mui/material-ui/blob/9222ed6f7dc214199341316337d74114e4c07c41/packages/mui-material/src/transitions/utils.ts#L3

Fade component pass 'null' to this function. It does not verify that ref element exists before passing it.

https://github.com/mui/material-ui/blob/9222ed6f7dc214199341316337d74114e4c07c41/packages/mui-material/src/Fade/Fade.js#L53-L64

https://github.com/mui/material-ui/blob/9222ed6f7dc214199341316337d74114e4c07c41/packages/mui-material/src/Fade/Fade.js#L68-L69

Typescript would help to avoid such type of issues.

[oliviertassinari]

As far as I know, the ref is guaranteed to be resolved by React at this point, we shouldn't check for null. @bladl Do you have a reproduction we can look into?

[l-you]

Issue was with Snackbar. Passing component that do not render html elements results in error "null is not an object (evaluating 'node.scrollTop')".

[RayHughes]

Just experienced a similar issue when attempting to conditionally render within the Snackbar component. Wrapping the conditional render around the component instead solved this issue, though now I have duplicated code. :(