Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unhandled Rejection (TypeError): Cannot read property 'scrollTop' of null

See original GitHub issue

Bug Report

There seems to be some issue while using the dropzone in function components. Most probably with the snackbar thingy as the file seems to be attached before crashing

Steps to reproduce

Just try to paste the basic example in a function component and select a file.

import React from 'react';
import { Box } from '@material-ui/core';
import { DropzoneArea } from 'material-ui-dropzone';

export default function CertificateForm() {
    return (
        <Box>
            <DropzoneArea
                filesLimit={1}
                acceptedFiles={['application/pdf']}
                onChange={(files) => console.log('Files:', files)}
            />
        </Box>
    );
}

The file appears in the console and right after the app crashes.

Expected behavior

Watch the file attached properly and a snackbar message appear (?).

Versions

  • OS: MacOS 10.15.7
  • Browser: Google Chrome Version 87.0.4280.88 (Official Build) (x86_64)

Packages installed:

Additional context

Full trace of console errors received:

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 `WithStyles(SnackbarContentWrapper)`.
    at SnackbarContentWrapper (http://localhost:3000/static/js/1.chunk.js:1374:23)
    at WithStyles(SnackbarContentWrapper) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at Transition (http://localhost:3000/static/js/0.chunk.js:169710:30)
    at Grow (http://localhost:3000/static/js/0.chunk.js:25499:24)
    at div
    at ClickAwayListener (http://localhost:3000/static/js/0.chunk.js:19481:24)
    at Snackbar (http://localhost:3000/static/js/0.chunk.js:37236:22)
    at WithStyles(ForwardRef(Snackbar)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at DropzoneAreaBase (http://localhost:3000/static/js/1.chunk.js:1498:81)
    at WithStyles(DropzoneAreaBase) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at DropzoneArea (http://localhost:3000/static/js/1.chunk.js:2057:81)
    at div
    at form
    at div
    at Container (http://localhost:3000/static/js/0.chunk.js:20112:23)
    at WithStyles(ForwardRef(Container)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at section
    at CertificateForm (http://localhost:3000/static/js/7.chunk.js:66:19)
    at Route (http://localhost:3000/static/js/0.chunk.js:167682:29)
    at RoleProtectedRoute (http://localhost:3000/static/js/main.chunk.js:1365:5)
    at ProtectedRoute (http://localhost:3000/static/js/main.chunk.js:1420:5)
    at Suspense
    at Switch (http://localhost:3000/static/js/0.chunk.js:167884:29)
    at div
    at Container (http://localhost:3000/static/js/0.chunk.js:20112:23)
    at WithStyles(ForwardRef(Container)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at main
    at Content (http://localhost:3000/static/js/main.chunk.js:518:81)
    at DrawerProvider (http://localhost:3000/static/js/main.chunk.js:2654:3)
    at div
    at MainLayout (http://localhost:3000/static/js/main.chunk.js:1056:19)
    at Router (http://localhost:3000/static/js/0.chunk.js:167317:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:166937:35)
    at App
    at ConnectionProvider (http://localhost:3000/static/js/main.chunk.js:2454:83)
    at NotificationsProvider (http://localhost:3000/static/js/main.chunk.js:2800:3)
    at ThemeProvider (http://localhost:3000/static/js/0.chunk.js:51142:24)
    at Provider (http://localhost:3000/static/js/0.chunk.js:164337:20)
utils.js:2 Uncaught TypeError: Cannot read property 'scrollTop' of null 
    at reflow (utils.js:2)
    at Grow.js:77
    at Object.onEnter (Grow.js:69)
    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:646)
    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:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at Object.enqueueSetState (react-dom.development.js:12467)
    at DropzoneAreaBase.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)
    at _callee2$ (DropzoneAreaBase.js:133)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
index.js:1 The above error occurred in the <Transition> component: 
    at Transition (http://localhost:3000/static/js/0.chunk.js:169710:30)
    at Grow (http://localhost:3000/static/js/0.chunk.js:25499:24)
    at div
    at ClickAwayListener (http://localhost:3000/static/js/0.chunk.js:19481:24)
    at Snackbar (http://localhost:3000/static/js/0.chunk.js:37236:22)
    at WithStyles(ForwardRef(Snackbar)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at DropzoneAreaBase (http://localhost:3000/static/js/1.chunk.js:1498:81)
    at WithStyles(DropzoneAreaBase) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at DropzoneArea (http://localhost:3000/static/js/1.chunk.js:2057:81)
    at div
    at form
    at div
    at Container (http://localhost:3000/static/js/0.chunk.js:20112:23)
    at WithStyles(ForwardRef(Container)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at section
    at CertificateForm (http://localhost:3000/static/js/7.chunk.js:66:19)
    at Route (http://localhost:3000/static/js/0.chunk.js:167682:29)
    at RoleProtectedRoute (http://localhost:3000/static/js/main.chunk.js:1365:5)
    at ProtectedRoute (http://localhost:3000/static/js/main.chunk.js:1420:5)
    at Suspense
    at Switch (http://localhost:3000/static/js/0.chunk.js:167884:29)
    at div
    at Container (http://localhost:3000/static/js/0.chunk.js:20112:23)
    at WithStyles(ForwardRef(Container)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
    at main
    at Content (http://localhost:3000/static/js/main.chunk.js:518:81)
    at DrawerProvider (http://localhost:3000/static/js/main.chunk.js:2654:3)
    at div
    at MainLayout (http://localhost:3000/static/js/main.chunk.js:1056:19)
    at Router (http://localhost:3000/static/js/0.chunk.js:167317:30)
    at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:166937:35)
    at App
    at ConnectionProvider (http://localhost:3000/static/js/main.chunk.js:2454:83)
    at NotificationsProvider (http://localhost:3000/static/js/main.chunk.js:2800:3)
    at ThemeProvider (http://localhost:3000/static/js/0.chunk.js:51142:24)
    at Provider (http://localhost:3000/static/js/0.chunk.js:164337:20)
asyncToGenerator.js:6 Uncaught (in promise) TypeError: Cannot read property 'scrollTop' of null 
at reflow (utils.js:2)
at Grow.js:77
at Object.onEnter (Grow.js:69)
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:646)
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:646)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at scheduleUpdateOnFiber (react-dom.development.js:21893)
at Object.enqueueSetState (react-dom.development.js:12467)
at DropzoneAreaBase.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)
at _callee2$ (DropzoneAreaBase.js:133)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:293)
at Generator.next (runtime.js:118)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)

</details>
<details>

<summary>
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
</summary>


at DropzoneArea (http://localhost:3000/static/js/1.chunk.js:2057:81)
at div
at form
at div
at Container (http://localhost:3000/static/js/0.chunk.js:20112:23)
at WithStyles(ForwardRef(Container)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
at section
at CertificateForm (http://localhost:3000/7.de5ee04e77fc19a0e910.hot-update.js:66:19)


</details>

<details>

<summary>
utils.js:2 Uncaught TypeError: Cannot read property 'scrollTop' of null
</summary>


at reflow (utils.js:2)
at Grow.js:77
at Object.onEnter (Grow.js:69)
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:646)
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:646)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at scheduleUpdateOnFiber (react-dom.development.js:21893)
at Object.enqueueSetState (react-dom.development.js:12467)
at DropzoneAreaBase.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365)
at _callee2$ (DropzoneAreaBase.js:133)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:293)
at Generator.next (runtime.js:118)
at asyncGeneratorStep (asyncToGenerator.js:3)
at _next (asyncToGenerator.js:25)


</details>

<details>

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


at Transition (http://localhost:3000/static/js/0.chunk.js:169710:30)
at Grow (http://localhost:3000/static/js/0.chunk.js:25499:24)
at div
at ClickAwayListener (http://localhost:3000/static/js/0.chunk.js:19481:24)
at Snackbar (http://localhost:3000/static/js/0.chunk.js:37236:22)
at WithStyles(ForwardRef(Snackbar)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
at DropzoneAreaBase (http://localhost:3000/static/js/1.chunk.js:1498:81)
at WithStyles(DropzoneAreaBase) (http://localhost:3000/static/js/0.chunk.js:52440:31)
at DropzoneArea (http://localhost:3000/static/js/1.chunk.js:2057:81)
at div
at form
at div
at Container (http://localhost:3000/static/js/0.chunk.js:20112:23)
at WithStyles(ForwardRef(Container)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
at section
at CertificateForm (http://localhost:3000/7.de5ee04e77fc19a0e910.hot-update.js:66:19)
at Route (http://localhost:3000/static/js/0.chunk.js:167682:29)
at RoleProtectedRoute (http://localhost:3000/static/js/main.chunk.js:1365:5)
at ProtectedRoute (http://localhost:3000/static/js/main.chunk.js:1420:5)
at Suspense
at Switch (http://localhost:3000/static/js/0.chunk.js:167884:29)
at div
at Container (http://localhost:3000/static/js/0.chunk.js:20112:23)
at WithStyles(ForwardRef(Container)) (http://localhost:3000/static/js/0.chunk.js:52440:31)
at main
at Content (http://localhost:3000/static/js/main.chunk.js:518:81)
at DrawerProvider (http://localhost:3000/static/js/main.chunk.js:2654:3)
at div
at MainLayout (http://localhost:3000/static/js/main.chunk.js:1056:19)
at Router (http://localhost:3000/static/js/0.chunk.js:167317:30)
at BrowserRouter (http://localhost:3000/static/js/0.chunk.js:166937:35)
at App
at ConnectionProvider (http://localhost:3000/static/js/main.chunk.js:2454:83)
at NotificationsProvider (http://localhost:3000/static/js/main.chunk.js:2800:3)
at ThemeProvider (http://localhost:3000/static/js/0.chunk.js:51142:24)
at Provider (http://localhost:3000/static/js/0.chunk.js:164337:20)

</details>

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:5
  • Comments:8

github_iconTop GitHub Comments

13reactions
martin-danhiercommented, Mar 4, 2021

Hello, I have the same issue with material-ui v4.11.3 and material-ui-dropzone v3.5.0. I am using Typescript v4.1.

I had the bug in a class component as well:

class MyComponent extends React.Component {
    render(): JSX.Element {
        return <DropzoneArea
            acceptedFiles={['image/png', 'image/jpeg']}
            dropzoneText='Drag an image file or click'
            onChange={(files): void => { console.log(files); }}
        />;
    }
}

It works fine at first, but as soon as you add a file, it crashes with the error:

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 `WithStyles(SnackbarContentWrapper)`.
    in SnackbarContentWrapper (created by WithStyles(SnackbarContentWrapper))
    in WithStyles(SnackbarContentWrapper) (created by Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by ForwardRef(Snackbar))
    in div (created by ClickAwayListener)
    in ClickAwayListener (created by ForwardRef(Snackbar))
    in ForwardRef(Snackbar) (created by WithStyles(ForwardRef(Snackbar)))
    in WithStyles(ForwardRef(Snackbar)) (created by DropzoneAreaBase)
    in DropzoneAreaBase (created by WithStyles(DropzoneAreaBase))
    in WithStyles(DropzoneAreaBase) (created by DropzoneArea)
    in DropzoneArea (at edit-dialog.tsx:30)

I found that the error doesn’t occur when you disable the alerts like this:

class MyComponent extends React.Component {
    render(): JSX.Element {
        return <DropzoneArea
            acceptedFiles={['image/png', 'image/jpeg']}
            dropzoneText='Drag an image file or click'
            onChange={(files): void => { console.log(files); }}
            showAlerts={false} // <--- here
        />;
    }
}

So, I guess that can be a workaround until the issue is solved.

3reactions
bestgosucommented, Dec 26, 2020

me too TypeError: Cannot read property ‘scrollTop’ of null i am move to typescript and errorrrrrrr

Read more comments on GitHub >

github_iconTop Results From Across the Web

react Cannot set property 'scrollTop' of undefined
I'm receiving the following error. How can I solve this issue. TypeError: Cannot set property 'scrollTop' of undefined ...
Read more >
Uncaught TypeError: Cannot read property 'scrollTop' of null
So, in Eureka , this code works fine: function close_and_reopen_UI_Page() { // Close this current pop-up UI page ...
Read more >
TypeError: can't define property "x": "obj" is not extensible
To fix this error, you will either need to remove the call to Object.preventExtensions() entirely, or move it to a position so that...
Read more >
Fix Cannot Set Property of Null Error in JavaScript - YouTube
Check us out at https://www.skillforge.com The " cannot set property of null " error is a very common JavaScript issue that you may...
Read more >
Throwing Cannot read property 'getBoundingClientRect' of ...
My first guess would be that you are using a framework like React, Vue, Angular, etc, and not properly referencing the element i.e....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

getIterate.js performance issues

Next page

Add typings for MaterialUI overrides