Lightrun
question-mark
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.

[TS] V2 prop type warnings (Grid, Box etc)

See original GitHub issue

When using Box and Grid, a large number of type warnings show up in the console.

It looks like these warnings happen when a custom component is passed-in via the tag/as propType.

The Grommet layout components pass in bunch of styling props that are otherwise not valid on the child components.

The custom types I’m using are components from the relay library (Link, Anchor) etc. So I do not have control over the props they accept, sans wrapping things with a custom higher order component.

@alansouzati Thank you for your work on some of prop types. Here are some of the warnings (there are too many of them to list). I figure that you might have a better idea for how we can address these systematically!

index.js:1446 Warning: Failed prop type: Invalid prop `as` of type `function` supplied to `Box`, expected `string`.
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:75
validatePropTypes @ react.development.js:1717
createElementWithValidation @ react.development.js:1810
(anonymous) @ hocs.js:254
updateForwardRef @ react-dom.development.js:14867
beginWork @ react-dom.development.js:16005
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: React does not recognize the `directionProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `directionprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
validateProperty$1 @ react-dom.development.js:7594
warnUnknownProperties @ react-dom.development.js:7637
validateProperties$2 @ react-dom.development.js:7660
validatePropertiesInDevelopment @ react-dom.development.js:7704
setInitialProperties @ react-dom.development.js:7968
finalizeInitialChildren @ react-dom.development.js:9128
completeWork @ react-dom.development.js:16547
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: React does not recognize the `elevationProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `elevationprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
validateProperty$1 @ react-dom.development.js:7594
warnUnknownProperties @ react-dom.development.js:7637
validateProperties$2 @ react-dom.development.js:7660
validatePropertiesInDevelopment @ react-dom.development.js:7704
setInitialProperties @ react-dom.development.js:7968
finalizeInitialChildren @ react-dom.development.js:9128
completeWork @ react-dom.development.js:16547
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: React does not recognize the `fillProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fillprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
validateProperty$1 @ react-dom.development.js:7594
warnUnknownProperties @ react-dom.development.js:7637
validateProperties$2 @ react-dom.development.js:7660
validatePropertiesInDevelopment @ react-dom.development.js:7704
setInitialProperties @ react-dom.development.js:7968
finalizeInitialChildren @ react-dom.development.js:9128
completeWork @ react-dom.development.js:16547
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: React does not recognize the `overflowProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `overflowprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
validateProperty$1 @ react-dom.development.js:7594
warnUnknownProperties @ react-dom.development.js:7637
validateProperties$2 @ react-dom.development.js:7660
validatePropertiesInDevelopment @ react-dom.development.js:7704
setInitialProperties @ react-dom.development.js:7968
finalizeInitialChildren @ react-dom.development.js:9128
completeWork @ react-dom.development.js:16547
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: React does not recognize the `wrapProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `wrapprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
validateProperty$1 @ react-dom.development.js:7594
warnUnknownProperties @ react-dom.development.js:7637
validateProperties$2 @ react-dom.development.js:7660
validatePropertiesInDevelopment @ react-dom.development.js:7704
setInitialProperties @ react-dom.development.js:7968
finalizeInitialChildren @ react-dom.development.js:9128
completeWork @ react-dom.development.js:16547
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: React does not recognize the `widthProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `widthprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
validateProperty$1 @ react-dom.development.js:7594
warnUnknownProperties @ react-dom.development.js:7637
validateProperties$2 @ react-dom.development.js:7660
validatePropertiesInDevelopment @ react-dom.development.js:7704
setInitialProperties @ react-dom.development.js:7968
finalizeInitialChildren @ react-dom.development.js:9128
completeWork @ react-dom.development.js:16547
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: React does not recognize the `heightProp` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `heightprop` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)
function.console.(anonymous function) @ index.js:1446
warningWithoutStack @ react-dom.development.js:520
warning @ react-dom.development.js:2742
validateProperty$1 @ react-dom.development.js:7594
warnUnknownProperties @ react-dom.development.js:7637
validateProperties$2 @ react-dom.development.js:7660
validatePropertiesInDevelopment @ react-dom.development.js:7704
setInitialProperties @ react-dom.development.js:7968
finalizeInitialChildren @ react-dom.development.js:9128
completeWork @ react-dom.development.js:16547
completeUnitOfWork @ react-dom.development.js:18925
performUnitOfWork @ react-dom.development.js:19132
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
_callee$ @ createBaseRouter.js:230
tryCatch @ runtime.js:63
invoke @ runtime.js:290
prototype.(anonymous function) @ runtime.js:116
step @ asyncToGenerator.js:21
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:32
Promise.then (async)
step @ asyncToGenerator.js:31
(anonymous) @ asyncToGenerator.js:39
F @ _export.js:43
(anonymous) @ asyncToGenerator.js:18
resolveMatch @ createBaseRouter.js:313
componentDidMount @ createBaseRouter.js:129
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:29
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ index.js:20
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1446 Warning: Received `true` for a non-boolean attribute `responsive`.

If you want to write it to the DOM, pass a string instead: responsive="true" or responsive={value.toString()}.
    in a (created by BaseLink)
    in BaseLink (created by Link)
    in Link (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledBox)
    in StyledBox (created by Box)
    in Box (created by Box)
    in Box (at Navbar.js:23)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Navbar.js:12)
    in Navbar (created by ContainerConstructor)
    in ContainerConstructor (created by ForwardRef(Relay(Navbar)))
    in ForwardRef(Relay(Navbar)) (at Dash/index.js:35)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrid)
    in StyledGrid (created by Grid)
    in Grid (at Dash/index.js:30)
    in Dash
    in ReadyStateRenderer
    in ElementsRenderer
    in StaticContainer
    in StaticContainer (created by BaseRouter)
    in BaseRouter (created by ConnectedRouter)
    in ConnectedRouter (created by FarceRouter)
    in Provider (created by FarceRouter)
    in FarceRouter (at src/index.js:31)
    in div (created by Context.Consumer)
    in StyledComponent (created by StyledGrommet)
    in StyledGrommet (created by Grommet)
    in Grommet (at Theme.js:19)
    in Theme (at src/index.js:30)

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
oorestisimecommented, Jun 24, 2019

Ok don’t hesitate to open a new issue!

1reaction
oorestisimecommented, Mar 2, 2019

Can you share a markup of how you use this to get warnings? not sure i see any props leakage in my applications this is why i am asking.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Failed prop type: The prop `justify` of `ForwardRef(Grid)` is ...
The warning message that you showed has a trace of the component hierarchy, which goes Grid -> WithStyles -> main -> Products, etc....
Read more >
Typechecking With PropTypes - React
In this example, we're using PropTypes.string . When an invalid value is provided for a prop, a warning will be shown in the...
Read more >
Upgrade Guide — Vuetify
Upgrade Guide. # Upgrading from v1.5.x to v2.0.x. Version 2 contains non backwards compatible breaking changes.
Read more >
Angular Data Grid Overview and Configuration - Infragistics
The grids do not support this kind of binding for primary key , foreign key and child key properties where applicable. EXAMPLE. MODULES....
Read more >
Annotating React Styled Components with TypeScript -- newline
In this case, we augment the interface with prop types associated with a <div /> element (the top-most child element rendered by the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Enhancement: Circular Progress indicator

Next page

global.colors.active not functional