Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lephleg opened this issue Dec 13, 2020 · 8 comments · May be fixed by #298
Open

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

lephleg opened this issue Dec 13, 2020 · 8 comments · May be fixed by #298

Comments

@lephleg
Copy link

lephleg commented 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>
@akash87
Copy link

akash87 commented Dec 20, 2020

I am facing similar issue, is there any update on this ?

@pikilon
Copy link

pikilon commented Dec 20, 2020

Same here

@bestgosu
Copy link

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

@akash87
Copy link

akash87 commented Jan 7, 2021

It seems like this issue happens on material-ui v5 - but works ok on v4.

@gaitat
Copy link

gaitat commented Feb 21, 2021

Is there an update on this or maybe a workaround? I am using functional components and just when the snackbar is supposed to appear I get the error message in the console:

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

I am not using refs anywhere in my app.

Thank you.

@martin-danhier
Copy link

martin-danhier commented 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.

@thierryxpertsea
Copy link

Any ETA for #298 release? Either this or a forwardRef implementation as a quick fix

@lowkeyshift
Copy link

showAlert={false} allows for functionality in material-ui v5, but curious when we will get update for fully supported material-ui v5? I found that just changing all the import paths to the new material-ui v5 allows this library to work, but this is the only issue I have come across.

Any insight to timeline would be helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants