Skip to content

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

New issue
New issue
Open
#298
Open
Unhandled Rejection (TypeError): Cannot read property 'scrollTop' of null#265
#298
@lephleg

Description

@lephleg
lephleg
opened on Dec 13, 2020

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:

  • "react": "^17.0.1",
  • "react-dom": "^17.0.1",
  • "@material-ui/core": "^4.11.2",
  • "@material-ui/icons": "^4.11.2",
  • "@material-ui/styles": "^4.11.2",
  • "material-ui-dropzone": "^3.5.0",

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 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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions