[Tabs] Invalid value warning triggered when using React.lazy

[iluvmemes]

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

[michaldudak]

@iluvmemes would you be able to create a reproduction in a repo I could investigate locally? Having to add dependencies to see the error makes it somewhat hard to investigate.

[vicentedr96]

I have the same problem

[remyzane]

same problem while import use React.lazy, e.g.

const Xyz = React.lazy(()=>import('...')

error: <Xyz />

fix: <Suspense fallback={null}><Xyz /></Suspense>

[iluvmemes]

same problem while import use React.lazy, e.g.

const Xyz = React.lazy(()=>import('...')

error: <Xyz />

fix: <Suspense fallback={null}><Xyz /></Suspense>

I've been trying to get a repo together to reproduce the problem per @michaldudak's request with lazy loading (we use that in our app). @remyzane we're already using suspense in our app and still receive the warnings. ☹️

[iluvmemes]

@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

[michaldudak]

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.