search

plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.54k stars 2.08k forks source link

react-dom reports "Unsupported style property margin-right" when dev_tools_ui is enabled #3020

Closed pupitetris closed 1 month ago

pupitetris commented 1 month ago 
dash                      2.18.1
dash-bootstrap-components 1.6.0
dash-core-components      2.0.0
dash-html-components      2.0.0
dash-table                5.0.0

When running my dash app with DASH_DEBUG=true, the Dev Tools appear alright, but I get the following warnings at the console, which don't appear when I deactivate the Dev Tools:

react-dom@16.v2_18_1m1727316655.14.0.js:82 Warning: Unsupported style property margin-top. Did you mean marginTop?
    in div (created by t)
    in t (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in section (created by Ts)
    in Ts (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider
printWarning @ react-dom@16.v2_18_1m1727316655.14.0.js:82
error @ react-dom@16.v2_18_1m1727316655.14.0.js:54
warnHyphenatedStyleName @ react-dom@16.v2_18_1m1727316655.14.0.js:4602
warnValidStyle @ react-dom@16.v2_18_1m1727316655.14.0.js:4650
setValueForStyles @ react-dom@16.v2_18_1m1727316655.14.0.js:4723
setInitialDOMProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:5924
setInitialProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:6149
finalizeInitialChildren @ react-dom@16.v2_18_1m1727316655.14.0.js:7622
completeWork @ react-dom@16.v2_18_1m1727316655.14.0.js:19113
completeUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22324
performUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22300
workLoopSync @ react-dom@16.v2_18_1m1727316655.14.0.js:22265
performSyncWorkOnRoot @ react-dom@16.v2_18_1m1727316655.14.0.js:21891
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:11224
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushSyncCallbackQueueImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:11219
flushSyncCallbackQueue @ react-dom@16.v2_18_1m1727316655.14.0.js:11207
flushPassiveEffectsImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:23018
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushPassiveEffects @ react-dom@16.v2_18_1m1727316655.14.0.js:22955
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:22834
workLoop @ react@16.v2_18_1m1727316655.14.0.js:2629
flushWork @ react@16.v2_18_1m1727316655.14.0.js:2584
performWorkUntilDeadline @ react@16.v2_18_1m1727316655.14.0.js:2196

react-dom@16.v2_18_1m1727316655.14.0.js:82 Warning: Unsupported style property margin-left. Did you mean marginLeft?
    in div (created by t)
    in t (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in section (created by Ts)
    in Ts (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider
printWarning @ react-dom@16.v2_18_1m1727316655.14.0.js:82
error @ react-dom@16.v2_18_1m1727316655.14.0.js:54
warnHyphenatedStyleName @ react-dom@16.v2_18_1m1727316655.14.0.js:4602
warnValidStyle @ react-dom@16.v2_18_1m1727316655.14.0.js:4650
setValueForStyles @ react-dom@16.v2_18_1m1727316655.14.0.js:4723
setInitialDOMProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:5924
setInitialProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:6149
finalizeInitialChildren @ react-dom@16.v2_18_1m1727316655.14.0.js:7622
completeWork @ react-dom@16.v2_18_1m1727316655.14.0.js:19113
completeUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22324
performUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22300
workLoopSync @ react-dom@16.v2_18_1m1727316655.14.0.js:22265
performSyncWorkOnRoot @ react-dom@16.v2_18_1m1727316655.14.0.js:21891
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:11224
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushSyncCallbackQueueImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:11219
flushSyncCallbackQueue @ react-dom@16.v2_18_1m1727316655.14.0.js:11207
flushPassiveEffectsImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:23018
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushPassiveEffects @ react-dom@16.v2_18_1m1727316655.14.0.js:22955
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:22834
workLoop @ react@16.v2_18_1m1727316655.14.0.js:2629
flushWork @ react@16.v2_18_1m1727316655.14.0.js:2584
performWorkUntilDeadline @ react@16.v2_18_1m1727316655.14.0.js:2196

react-dom@16.v2_18_1m1727316655.14.0.js:82 Warning: Unsupported style property margin-bottom. Did you mean marginBottom?
    in button (created by on)
    in on (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in section (created by Ts)
    in Ts (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider
printWarning @ react-dom@16.v2_18_1m1727316655.14.0.js:82
error @ react-dom@16.v2_18_1m1727316655.14.0.js:54
warnHyphenatedStyleName @ react-dom@16.v2_18_1m1727316655.14.0.js:4602
warnValidStyle @ react-dom@16.v2_18_1m1727316655.14.0.js:4650
setValueForStyles @ react-dom@16.v2_18_1m1727316655.14.0.js:4723
setInitialDOMProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:5924
setInitialProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:6149
finalizeInitialChildren @ react-dom@16.v2_18_1m1727316655.14.0.js:7622
completeWork @ react-dom@16.v2_18_1m1727316655.14.0.js:19113
completeUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22324
performUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22300
workLoopSync @ react-dom@16.v2_18_1m1727316655.14.0.js:22265
performSyncWorkOnRoot @ react-dom@16.v2_18_1m1727316655.14.0.js:21891
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:11224
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushSyncCallbackQueueImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:11219
flushSyncCallbackQueue @ react-dom@16.v2_18_1m1727316655.14.0.js:11207
flushPassiveEffectsImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:23018
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushPassiveEffects @ react-dom@16.v2_18_1m1727316655.14.0.js:22955
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:22834
workLoop @ react@16.v2_18_1m1727316655.14.0.js:2629
flushWork @ react@16.v2_18_1m1727316655.14.0.js:2584
performWorkUntilDeadline @ react@16.v2_18_1m1727316655.14.0.js:2196

react-dom@16.v2_18_1m1727316655.14.0.js:82 Warning: Unsupported style property margin-right. Did you mean marginRight?
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by BaseTreeContainer)
    in div (created by ei)
    in ei (created by CheckedComponent)
    in CheckedComponent (created by BaseTreeContainer)
    in ComponentErrorBoundary (created by BaseTreeContainer)
    in BaseTreeContainer (created by DashWrapper)
    in DashWrapper (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider
printWarning @ react-dom@16.v2_18_1m1727316655.14.0.js:82
error @ react-dom@16.v2_18_1m1727316655.14.0.js:54
warnHyphenatedStyleName @ react-dom@16.v2_18_1m1727316655.14.0.js:4602
warnValidStyle @ react-dom@16.v2_18_1m1727316655.14.0.js:4650
setValueForStyles @ react-dom@16.v2_18_1m1727316655.14.0.js:4723
setInitialDOMProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:5924
setInitialProperties @ react-dom@16.v2_18_1m1727316655.14.0.js:6149
finalizeInitialChildren @ react-dom@16.v2_18_1m1727316655.14.0.js:7622
completeWork @ react-dom@16.v2_18_1m1727316655.14.0.js:19113
completeUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22324
performUnitOfWork @ react-dom@16.v2_18_1m1727316655.14.0.js:22300
workLoopSync @ react-dom@16.v2_18_1m1727316655.14.0.js:22265
performSyncWorkOnRoot @ react-dom@16.v2_18_1m1727316655.14.0.js:21891
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:11224
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushSyncCallbackQueueImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:11219
flushSyncCallbackQueue @ react-dom@16.v2_18_1m1727316655.14.0.js:11207
flushPassiveEffectsImpl @ react-dom@16.v2_18_1m1727316655.14.0.js:23018
unstable_runWithPriority @ react@16.v2_18_1m1727316655.14.0.js:2685
runWithPriority$1 @ react-dom@16.v2_18_1m1727316655.14.0.js:11174
flushPassiveEffects @ react-dom@16.v2_18_1m1727316655.14.0.js:22955
(anonymous) @ react-dom@16.v2_18_1m1727316655.14.0.js:22834
workLoop @ react@16.v2_18_1m1727316655.14.0.js:2629
flushWork @ react@16.v2_18_1m1727316655.14.0.js:2584
performWorkUntilDeadline @ react@16.v2_18_1m1727316655.14.0.js:2196
AnnMarieW commented 1 month ago

@pupitetris This is not a bug. If you are using the inline style prop, the selector needs to be camelCase, for example:

style={"marginRight": 24}

rather than style={"margin-right": 24}

pupitetris commented 1 month ago

@AnnMarieW thanks. I cleaned up the code, there were a bunch of stylesheet properties with the wrong notation as you signaled and now the errors are gone. I thought it was a problem with the dev tools because the errors only appeared when I activate the dev tools. Is there a reason why this would be the case?