search

influxdata / clockface

UI Kit for building Chronograf
https://influxdata.github.io/clockface
MIT License
44 stars 18 forks source link

Resizing error #902

Open minotaurdsp opened 1 year ago

minotaurdsp commented 1 year ago

On resize to mobile resolution, page gets ref error

import React, { Component } from "react";
import {AppWrapper} from '@influxdata/clockface'
import {FunnelPage} from '@influxdata/clockface'
import {Grid} from '@influxdata/clockface'
class Home extends Component{    
    render() {
        return (
            <AppWrapper type="funnel">
                <FunnelPage>
                <Grid >
                    <Grid.Row >
                        <h2>Home</h2>
                    </Grid.Row>
                </Grid>
                </FunnelPage>
            </AppWrapper>
        )
    }
}
export default Home;

Error

react_devtools_backend.js:4026 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at div
    at o (http://localhost:3000/static/js/bundle.js:6898:7)
    at t (http://localhost:3000/static/js/bundle.js:7719:31)
    at div
    at t (http://localhost:3000/static/js/bundle.js:7799:31)
    at div
    at t (http://localhost:3000/static/js/bundle.js:7899:17)
    at Xn (http://localhost:3000/static/js/bundle.js:8333:15)
    at div
    at http://localhost:3000/static/js/bundle.js:20600:15
    at t (http://localhost:3000/static/js/bundle.js:20717:30)
    at div
    at http://localhost:3000/static/js/bundle.js:2733:15
    at Home (http://localhost:3000/static/js/bundle.js:306:1)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:91621:5)
    at Outlet (http://localhost:3000/static/js/bundle.js:91976:26)
    at Layout
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:91621:5)
    at Routes (http://localhost:3000/static/js/bundle.js:92070:5)
    at App
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:91621:5)
    at Routes (http://localhost:3000/static/js/bundle.js:92070:5)
    at AuthProvider (http://localhost:3000/static/js/bundle.js:1677:5)
    at Router (http://localhost:3000/static/js/bundle.js:92001:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:90222:5)
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
findHostInstanceWithWarning @ react-dom.development.js:28762
findDOMNode @ react-dom.development.js:29645
value @ DraggableCore.js:375
value @ DraggableCore.js:338
invokeLayoutEffectMountInDEV @ react-dom.development.js:25133
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27327
commitRootImpl @ react-dom.development.js:26883
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
rsc.esm.js:816 Uncaught Error: Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.
    at t.<anonymous> (rsc.esm.js:816:1)
    at getStateFromUpdate (react-dom.development.js:13689:1)
    at processUpdateQueue (react-dom.development.js:13837:1)
    at updateClassInstance (react-dom.development.js:14672:1)
    at updateClassComponent (react-dom.development.js:19695:1)
    at beginWork (react-dom.development.js:21611:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
(anonymous) @ rsc.esm.js:816
getStateFromUpdate @ react-dom.development.js:13689
processUpdateQueue @ react-dom.development.js:13837
updateClassInstance @ react-dom.development.js:14672
updateClassComponent @ react-dom.development.js:19695
beginWork @ react-dom.development.js:21611
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
rsc.esm.js:816 Uncaught Error: Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.
    at t.<anonymous> (rsc.esm.js:816:1)
    at getStateFromUpdate (react-dom.development.js:13689:1)
    at processUpdateQueue (react-dom.development.js:13837:1)
    at updateClassInstance (react-dom.development.js:14672:1)
    at updateClassComponent (react-dom.development.js:19695:1)
    at beginWork (react-dom.development.js:21611:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
(anonymous) @ rsc.esm.js:816
getStateFromUpdate @ react-dom.development.js:13689
processUpdateQueue @ react-dom.development.js:13837
updateClassInstance @ react-dom.development.js:14672
updateClassComponent @ react-dom.development.js:19695
beginWork @ react-dom.development.js:21611
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react_devtools_backend.js:4026 The above error occurred in the <t> component:

    at t (http://localhost:3000/static/js/bundle.js:7799:31)
    at div
    at t (http://localhost:3000/static/js/bundle.js:7899:17)
    at Xn (http://localhost:3000/static/js/bundle.js:8333:15)
    at div
    at http://localhost:3000/static/js/bundle.js:20600:15
    at t (http://localhost:3000/static/js/bundle.js:20717:30)
    at div
    at http://localhost:3000/static/js/bundle.js:2733:15
    at Home (http://localhost:3000/static/js/bundle.js:306:1)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:91621:5)
    at Outlet (http://localhost:3000/static/js/bundle.js:91976:26)
    at Layout
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:91621:5)
    at Routes (http://localhost:3000/static/js/bundle.js:92070:5)
    at App
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:91621:5)
    at Routes (http://localhost:3000/static/js/bundle.js:92070:5)
    at AuthProvider (http://localhost:3000/static/js/bundle.js:1677:5)
    at Router (http://localhost:3000/static/js/bundle.js:92001:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:90222:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:4026
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
rsc.esm.js:816 Uncaught Error: Element was not created. Possibly you haven't provided HTMLDivElement to renderer's `elementRef` function.
    at t.<anonymous> (rsc.esm.js:816:1)
    at getStateFromUpdate (react-dom.development.js:13689:1)
    at processUpdateQueue (react-dom.development.js:13837:1)
    at updateClassInstance (react-dom.development.js:14672:1)
    at updateClassComponent (react-dom.development.js:19695:1)
    at beginWork (react-dom.development.js:21611:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
(anonymous) @ rsc.esm.js:816
getStateFromUpdate @ react-dom.development.js:13689
processUpdateQueue @ react-dom.development.js:13837
updateClassInstance @ react-dom.development.js:14672
updateClassComponent @ react-dom.development.js:19695
beginWork @ react-dom.development.js:21611
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
commitRootImpl @ react-dom.development.js:26959
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

Working without Grid component so that way I think there's is something missing or a bug