DevTools together with Material UI creates warning

[julihereu]

When using DevTools together with Material UI I get the warning that DevTools uses a <pre> tag as a descendant of a <p> tag. As Material UI is such a widely used library, would it be possible to use another tag than pre to build up the DevTools?

Here is the traceback:

react_devtools_backend.js:2430 Warning: validateDOMNesting(...): <pre> cannot appear as a descendant of <p>.
    at pre
    at p
    at td
    at tr
    at tbody
    at table
    at Styled(table)
    at PanelTable (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7169:24)
    at section
    at PanelChildren (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7302:21)
    at PanelChildren (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7302:21)
    at div
    at div
    at Panel (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7346:22)
    at div
    at div
    at Animate (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:80826:13)
    at DevToolUI (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7487:22)
    at s (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:35453:543)
    at DevTool (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:7547:33)
    at FormProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:78358:150)
    at StructureForm (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:92835:23)
    at StructurePanel (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:93005:93)
    at section
    at MuiGrid-root (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73)
    at Grid (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:11129:92)
    at div
    at MuiGrid-root (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73)
    at Grid (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:11129:92)
    at div
    at http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8082:5
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73
    at Box (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8126:98)
    at TransformerRegistry (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:93619:23)
    at StructuredReportContent
    at TemplatePage
    at WithSuperJSON (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:29853:42)
    at BlitzInnerRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:1355:5)
    at main
    at http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8082:5
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73
    at Box (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8126:98)
    at div
    at MuiContainer-root (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73)
    at Container (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:10531:86)
    at div
    at http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8082:5
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:3561:73
    at Box (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:8126:98)
    at Layout (http://localhost:3000/_next/static/chunks/pages/templates/%5BtemplateId%5D.js?ts=1617536214703:95424:20)
    at Suspense
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:76948:37)
    at InnerThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:7954:74)
    at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:10920:5)
    at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:7974:5)
    at SwitchableThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:97670:23)
    at LocalizationProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:10313:5)
    at LocalizationProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:97427:23)
    at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:99659:24)
    at AppWithStructuredReportTranslations (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:98405:28)
    at I18nextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:78760:19)
    at AppWithSiteTranslations (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:98255:28)
    at Provider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:82004:20)
    at AppWithRedux (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:98117:32)
    at BlitzOuterRoot (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1617536214703:1380:34)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:146:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:250:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:8662:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:9146:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1617536214703:9277:24)

[bluebill1049]

can you try to reproduce that in a codesandbox?

[fourteenmeister]

I am not using Material UI and this error is reproduced for me too

P.S.
it looks like an error occurs if the field value is an array

[yudielcurbelo]

Here is a codesandbox reflecting the issue.

https://codesandbox.io/s/react-hook-form-defaultvalues-v7-forked-877mh?file=/src/index.js

[cabbiepete]

This is not specifically do to with Material-UI but where the value is not a scalar, e.g. an array or object

As per @yudielcurbelo's code sandbox which shows an array and this one that shows an object (using Material-ui Autocomplete)

https://codesandbox.io/s/react-hook-form-devtools-non-scalar-value-console-5247d?file=/src/App.tsx

[cabbiepete]

Looks like the issue is with the p tag surrounding value for these cases

devtools/src/panelTable.tsx

Line 246 in fcee352

{value}

[cabbiepete]

Apologies if the PR is only useful for reference obviously not the only way to resolve but clearly indicates the issue.

[cabbiepete]

Resolved in v3.0.2

[bluebill1049]

amazing thank you very much @cabbiepete ❤️