Open lephleg opened 3 years ago
I am facing similar issue, is there any update on this ?
Same here
me too TypeError: Cannot read property 'scrollTop' of null i am move to typescript and errorrrrrrr
It seems like this issue happens on material-ui v5 - but works ok on v4.
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.
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.
Any ETA for #298 release? Either this or a forwardRef
implementation as a quick fix
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.
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.
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
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 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) ```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.
``` 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) ```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/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) ```