Closed l-you closed 2 years ago
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
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.
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.
Typescript would help to avoid such type of issues.
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?
Issue was with Snackbar. Passing component that do not render html elements results in error "null is not an object (evaluating 'node.scrollTop')".
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. :(
Duplicates
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:
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 🌎
``` 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 ```npx @mui/envinfo