SnackbarContent: Cannot read properties of null (reading 'scrollTop')

[lifeeric]

Hello all,

first of all, I appreciate all your efforts taken in this Wonderful open source project, which is a lifesaver!

Error I'm getting some unexpected errors when I create a separate re-usable component for the SnackbarContent and try to import it. if I direct start implementing it from the @mui/material, it works but it doesn't work in the below example. I'm working on upgrading the material-ui-dropzone I need it for my project and this is where I'm getting this error.

const SnackbarWrapper = () => <SnackbarContent message="I love snacks." />;

export const App = () => (
      <Snackbar
        open={open}
        onClose={handleClose}
        autoHideDuration={6000}
        anchorOrigin={{ vertical, horizontal }}
      >
        <SnackbarWrapper />
      </Snackbar>
);

shows this errors:

index.js:1 Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Grow)`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
    at Grow (http://localhost:3000/static/js/vendors~main.chunk.js:10153:5)
    at Snackbar (http://localhost:3000/static/js/vendors~main.chunk.js:11071:86)
    at App (http://localhost:3000/static/js/main.chunk.js:223:83)
    at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14617:74)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14199:5)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14637:5)
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:50827:20)

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Transition`.
    at SnackbarWrapper (http://localhost:3000/static/js/main.chunk.js:111:17)
    at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:54248:30)
    at Grow (http://localhost:3000/static/js/vendors~main.chunk.js:10153:5)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:605:73
    at ClickAwayListener (http://localhost:3000/static/js/vendors~main.chunk.js:9913:5)
    at Snackbar (http://localhost:3000/static/js/vendors~main.chunk.js:11071:86)
    at App (http://localhost:3000/static/js/main.chunk.js:223:83)
    at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14617:74)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14199:5)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14637:5)
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:50827:20)

utils.js:1 Uncaught TypeError: Cannot read properties of null (reading 'scrollTop')
    at reflow (utils.js:1)
    at Grow.js:74
    at Object.onEnter (Grow.js:67)
    at Transition.performEnter (Transition.js:262)
    at Transition.updateStatus (Transition.js:228)
    at Transition.componentDidMount (Transition.js:172)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at discreteUpdates$1 (react-dom.development.js:22420)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

index.js:1 The above error occurred in the <Transition> component:

    at Transition (http://localhost:3000/static/js/vendors~main.chunk.js:54248:30)
    at Grow (http://localhost:3000/static/js/vendors~main.chunk.js:10153:5)
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:605:73
    at ClickAwayListener (http://localhost:3000/static/js/vendors~main.chunk.js:9913:5)
    at Snackbar (http://localhost:3000/static/js/vendors~main.chunk.js:11071:86)
    at App (http://localhost:3000/static/js/main.chunk.js:223:83)
    at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14617:74)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14199:5)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:14637:5)
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:50827:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

utils.js:1 Uncaught TypeError: Cannot read properties of null (reading 'scrollTop')
    at reflow (utils.js:1)
    at Grow.js:74
    at Object.onEnter (Grow.js:67)
    at Transition.performEnter (Transition.js:262)
    at Transition.updateStatus (Transition.js:228)
    at Transition.componentDidMount (Transition.js:172)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at discreteUpdates$1 (react-dom.development.js:22420)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

Here is the codesanbox.

Thank You so much for your help!

[siriwatknp]

I think it is similar to this https://mui.com/guides/migration-v4/#cannot-read-property-scrolltop-of-null.

[eps1lon]

The very first error message explains why this is happening:

index.js:1 Warning: Failed prop type: Invalid prop children supplied to ForwardRef(Grow). Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide

Always read error messages top-to-bottom not bottom-to-top. The very first warning/error usually indicates the code may later crash.

[btyler]

So the solution is to litter previously working v4 code with divs or forwardrefs? This doesn't help with code smell.

[michaelVictoriaDev]

Same here

[mmgil]

Same here

[caioedut]

Works for me: Pass children as real children instead of using "children" prop.

Wrong: <Snack {...} children={children}/>

Correct: <Snack {...}> {children} </Snack>

[AliMMehr]

Same here

[AliMMehr]

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>

[abhishekdam]

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>

this is one worked for me

[alexeybryk]

Hello. You can also add React.forwardRef to your children component. This works for me.

[AChangXD]

Bug is still here, wrapping child component in div worked for me. Sometimes I have to wrap it in div sometimes I don't, it's weird.

Edit: After some deeper digging, if you wrap your child component in a React Fragment(i.e. <> </>), this error will happen.