search

plangrid / react-file-viewer

MIT License
523 stars 339 forks source link

Cannot read property 'parentElement' of null #80

Open liudonghua123 opened 6 years ago

liudonghua123 commented 6 years ago

My code is as simple as

          <FileViewer
            fileType={extension}
            filePath={this.state.filePath}
          />

And When I reder a simple xlsx file, it gave me the following errors on Chrome console.

Uncaught TypeError: Cannot read property 'scrollTop' of null
    at Object.getScroll (index.js:21)
    at Object.getScroll (index.js:21)
    at Object.componentDidMount (index.js:21)
    at Object.<anonymous> (index.js:16)
    at Object.componentDidMount (index.js:16)
    at commitLifeCycles (react-dom.development.js:14362)
    at commitAllLifeCycles (react-dom.development.js:15463)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15604)
    at completeRoot (react-dom.development.js:16619)
    at performWorkOnRoot (react-dom.development.js:16564)
    at performWork (react-dom.development.js:16483)
    at performSyncWork (react-dom.development.js:16455)
    at requestWork (react-dom.development.js:16355)
    at scheduleWork$1 (react-dom.development.js:16219)
    at Object.enqueueSetState (react-dom.development.js:11300)
    at n../node_modules/react-file-viewer/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState (ReactBaseClasses.js:62)
    at XMLHttpRequest.n.onload (index.js:11)
getScroll @ index.js:21
getScroll @ index.js:21
componentDidMount @ index.js:21
(anonymous) @ index.js:16
(anonymous) @ index.js:16
commitLifeCycles @ react-dom.development.js:14362
commitAllLifeCycles @ react-dom.development.js:15463
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15604
completeRoot @ react-dom.development.js:16619
performWorkOnRoot @ react-dom.development.js:16564
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
requestWork @ react-dom.development.js:16355
scheduleWork$1 @ react-dom.development.js:16219
enqueueSetState @ react-dom.development.js:11300
./node_modules/react-file-viewer/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:62
n.onload @ index.js:11
load (async)
value @ index.js:11
n @ index.js:11
constructClassInstance @ react-dom.development.js:11448
updateClassComponent @ react-dom.development.js:13145
beginWork @ react-dom.development.js:13825
performUnitOfWork @ react-dom.development.js:15864
workLoop @ react-dom.development.js:15903
renderRoot @ react-dom.development.js:15943
performWorkOnRoot @ react-dom.development.js:16561
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
interactiveUpdates$1 @ react-dom.development.js:16720
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4533
react-dom.development.js:94 [Violation] 'load' handler took 12570ms
index.js:21 Uncaught TypeError: Cannot read property 'parentElement' of null
    at Object.gridWidth (index.js:21)
    at Object.updateMetrics (index.js:16)
    at Object.componentDidMount (index.js:16)
    at Object.componentDidMount (index.js:16)
    at commitLifeCycles (react-dom.development.js:14362)
    at commitAllLifeCycles (react-dom.development.js:15463)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at commitRoot (react-dom.development.js:15604)
    at completeRoot (react-dom.development.js:16619)
    at performWorkOnRoot (react-dom.development.js:16564)
    at performWork (react-dom.development.js:16483)
    at performSyncWork (react-dom.development.js:16455)
    at requestWork (react-dom.development.js:16355)
    at scheduleWork$1 (react-dom.development.js:16219)
    at Object.enqueueSetState (react-dom.development.js:11300)
    at n../node_modules/react-file-viewer/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState (ReactBaseClasses.js:62)
    at XMLHttpRequest.n.onload (index.js:11)
gridWidth @ index.js:21
updateMetrics @ index.js:16
componentDidMount @ index.js:16
(anonymous) @ index.js:16
commitLifeCycles @ react-dom.development.js:14362
commitAllLifeCycles @ react-dom.development.js:15463
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15604
completeRoot @ react-dom.development.js:16619
performWorkOnRoot @ react-dom.development.js:16564
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
requestWork @ react-dom.development.js:16355
scheduleWork$1 @ react-dom.development.js:16219
enqueueSetState @ react-dom.development.js:11300
./node_modules/react-file-viewer/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:62
n.onload @ index.js:11
load (async)
value @ index.js:11
n @ index.js:11
constructClassInstance @ react-dom.development.js:11448
updateClassComponent @ react-dom.development.js:13145
beginWork @ react-dom.development.js:13825
performUnitOfWork @ react-dom.development.js:15864
workLoop @ react-dom.development.js:15903
renderRoot @ react-dom.development.js:15943
performWorkOnRoot @ react-dom.development.js:16561
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
interactiveUpdates$1 @ react-dom.development.js:16720
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4533
react-dom.development.js:94 [Violation] 'load' handler took 1257ms
index.js:2178 The above error occurred in the <Grid> component:
    in Grid
    in div
    in div
    in ReactDataGrid
    in t
    in n
    in div
    in div
    in t (at App.js:101)
    in main (at App.js:158)
    in div (at App.js:151)
    in div (at App.js:150)
    in div (at App.js:148)
    in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:14227
logError @ react-dom.development.js:14266
update.callback @ react-dom.development.js:14919
callCallback @ react-dom.development.js:10879
commitUpdateQueue @ react-dom.development.js:10912
commitLifeCycles @ react-dom.development.js:14397
commitAllLifeCycles @ react-dom.development.js:15463
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:15604
completeRoot @ react-dom.development.js:16619
performWorkOnRoot @ react-dom.development.js:16564
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
requestWork @ react-dom.development.js:16355
scheduleWork$1 @ react-dom.development.js:16219
enqueueSetState @ react-dom.development.js:11300
./node_modules/react-file-viewer/node_modules/react/lib/ReactBaseClasses.js.ReactComponent.setState @ ReactBaseClasses.js:62
n.onload @ index.js:11
load (async)
value @ index.js:11
n @ index.js:11
constructClassInstance @ react-dom.development.js:11448
updateClassComponent @ react-dom.development.js:13145
beginWork @ react-dom.development.js:13825
performUnitOfWork @ react-dom.development.js:15864
workLoop @ react-dom.development.js:15903
renderRoot @ react-dom.development.js:15943
performWorkOnRoot @ react-dom.development.js:16561
performWork @ react-dom.development.js:16483
performSyncWork @ react-dom.development.js:16455
interactiveUpdates$1 @ react-dom.development.js:16720
interactiveUpdates @ react-dom.development.js:2150
dispatchInteractiveEvent @ react-dom.development.js:4533
index.js:2178 The above error occurred in the <ReactDataGrid> component:
    in ReactDataGrid
    in t
    in n
    in div
    in div
    in t (at App.js:101)
    in main (at App.js:158)
    in div (at App.js:151)
    in div (at App.js:150)
    in div (at App.js:148)
    in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

demo.xlsx

bayoumymac commented 6 years ago

getting the same exact error in here too for the same use case