material-ui: [Tabs] Invalid value warning triggered when using React.lazy

v5.0.4

Much like the description in #8489, when using dynamic data to generate tabs and their contents, I receive the error:

MUI: The value provided to the Tabs component is invalid. The Tab with this value (“0”) is not part of the document layout. Make sure the tab item is present in the document or that it’s not display: none.

However, this only occurs once in our app after a hard refresh. I have reproduced this in a code sandbox however, it seems that there may be some caching with codesandbox.io that prevents it from happening.

In order to reproduce it in Codesandbox, you will need to add or remove a dependency such as lodash or something from the fork.

https://codesandbox.io/s/sparkling-grass-sfidi?file=/src/TabIssue.jsx

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 2
Comments: 15 (9 by maintainers)

Most upvoted comments

For me this issue is still happening even after upgrading to “react”: “^18.2.0”, so could be something else as well?

mikkopori on Jul 15, 2022

@mikkopori, @BryanAPEX thanks for letting us know. I’m reopening the issue.

michaldudak on Oct 28, 2022

I’m also still experiencing this after upgrading to React 18.2.0 and MUI 5.5.3.

BryanAPEX on Aug 3, 2022

Duplicate of https://github.com/mui-org/material-ui/issues/14077

eps1lon on Nov 3, 2021

This warning is caused by the code added as a fix for #26582. @oliviertassinari you suggested to check if the tab width and height are 0. This, unfortunately, captures the case described here: when React.lazy is used, the tab’s width and height are 0. I propose to change the condition this way:

--- a/packages/mui-material/src/Tabs/Tabs.js
+++ b/packages/mui-material/src/Tabs/Tabs.js
@@ -357,9 +357,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
           if (
             process.env.NODE_ENV !== 'test' &&
             !warnedOnceTabPresent &&
-            tabMeta &&
-            tabMeta.width === 0 &&
-            tabMeta.height === 0
+            tab?.style?.display === 'none'
           ) {
             tabsMeta = null;
             console.error(

It should cover the original case described in #26582 and prevent the warning from firing in this case.

michaldudak on Nov 2, 2021

@remyzane was correct. It looks as though it happens when the contents of the actual tab is lazy loaded. @michaldudak here is a repo you can look at.

https://github.com/iluvmemes/MUI-29209

iluvmemes on Nov 1, 2021