Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Drawer example warnings

See original GitHub issue

When testing the drawer example, after copy and paste from the docs in a new create-react-app app

https://codesandbox.io/s/morning-fire-yjoi9

I see this kind of unrelated warnings.


    import "@reach/dialog/styles.css";

  Otherwise you'll need to include them some other way:

    <link rel="stylesheet" type="text/css" href="node_modules/@reach/dialog/styles.css" />

  For more information visit https://ui.reach.tech/styling.
   
    in Component (created by Anonymous)
    in Anonymous (created by Context.Consumer)
    in Context.Consumer (created by Context.Consumer)
    in Context.Consumer (created by Styled(Component))
    in Styled(Component) (created by Anonymous)
    in Anonymous (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by Anonymous)
    in Anonymous (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in App (at src/index.js:7)
r @ backend.js:1
checkStyles @ index.js:12
checkDialogStyles @ index.js:72
componentDidMount @ index.js:93
commitLifeCycles @ react-dom.development.js:21142
commitLayoutEffects @ react-dom.development.js:24138
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:466
commitRootImpl @ react-dom.development.js:23903
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
commitRoot @ react-dom.development.js:23723
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `zIndex` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `zindex` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Component)
    in div (created by RemoveScroll)
    in RemoveScroll (created by Component)
    in div (created by FocusLock)
    in FocusLock (created by Component)
    in Component (created by ForwardRef)
    in Component (created by Portal)
    in Portal (created by ForwardRef)
    in Component (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by ForwardRef)
    in ForwardRef (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in header (at App.js:104)
    in div (at App.js:103)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (at App.js:102)
    in App (at src/index.js:7)
console.<computed> @ index.js:1375
r @ backend.js:1
warningWithoutStack @ react-dom.development.js:563
warning @ react-dom.development.js:2965
validateProperty$1 @ react-dom.development.js:8849
warnUnknownProperties @ react-dom.development.js:8892
validateProperties$2 @ react-dom.development.js:8915
validatePropertiesInDevelopment @ react-dom.development.js:8960
setInitialProperties @ react-dom.development.js:9236
finalizeInitialChildren @ react-dom.development.js:10437
completeWork @ react-dom.development.js:20078
completeUnitOfWork @ react-dom.development.js:23540
performUnitOfWork @ react-dom.development.js:23513
workLoopSync @ react-dom.development.js:23480
renderRoot @ react-dom.development.js:23155
runRootCallback @ react-dom.development.js:22809
(anonymous) @ react-dom.development.js:11886
unstable_runWithPriority @ scheduler.development.js:674
runWithPriority$2 @ react-dom.development.js:11834
flushSyncCallbackQueueImpl @ react-dom.development.js:11881
flushSyncCallbackQueue @ react-dom.development.js:11869
discreteUpdates$1 @ react-dom.development.js:22941
discreteUpdates @ react-dom.development.js:2440
dispatchDiscreteEvent @ react-dom.development.js:6254
index.js:1375 Warning: React does not recognize the `overflowY` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `overflowy` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Component)
    in div (created by RemoveScroll)
    in RemoveScroll (created by Component)
    in div (created by FocusLock)
    in FocusLock (created by Component)
    in Component (created by ForwardRef)
    in Component (created by Portal)
    in Portal (created by ForwardRef)
    in Component (created by ForwardRef)
    in ForwardRef (created by Context.Consumer)
    in Styled(Component) (created by ForwardRef)
    in ForwardRef (created by Spring)
    in Spring (created by KeyframesImpl)
    in KeyframesImpl (created by ForwardRef)
    in ForwardRef (created by Transition)
    in Transition (created by DrawerTransition)
    in DrawerTransition (created by Drawer)
    in Drawer (at App.js:36)
    in DrawerExample (at App.js:109)
    in header (at App.js:104)
    in div (at App.js:103)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (at App.js:102)
    in App (at src/index.js:7)````