Fluentui: Spurious error: The children of a Pivot component must be of type PivotItem to be rendered.

[akoltz]

This issue was reported previously here: https://github.com/OfficeDev/office-ui-fabric-react/issues/8867
It was closed due to inactivity. I have an isolated repro of the problem.

Environment Information

• Package version(s): "office-ui-fabric-react": "^7.48.0"
• Browser and OS versions: Windows 10, Chrome 77.0.3865.90 64-bit

Please provide a reproduction of the bug in a codepen:

I could not repro in a code-pen but I did put together a small repo that has the bug:
https://github.com/akoltz/ouifr-pivot-bug

In this case, I am able to repro the issue when I am also using a third party library, 'react-timeseries-charts' side-by-side with the Pivot. But this just happens to be the lib that triggered the issue for me... there may be others and it may not be due to bad behavior in that lib. I'm using dozens of other react office-ui-fabric-react components that never had a problem.

The repro does not require rendering any of the components in react-timeseries-charts. Simply importing it causes the Pivot to break.

Actual behavior:

Pivot does not render and throws a "The children of a Pivot component must be of type PivotItem to be rendered." error in the console.

Expected behavior:

Pivot item renders

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes)

Requested priority: Low

Products/sites affected: (if applicable) None

[khmakoto]

Hi @akoltz, thank you for filing this issue! So, something weird is happening here. The culprit seems to be line 222 in Pivot.base.tsx where we have if (typeof child === 'object' && child.type === PivotItemType) {.

I've checked in the debugger and found that child.type === PivotItemType is true when you don't import that library and false if you do. The interesting part is that the contents of the function are still the same, as exemplified by the fact that if you evaluate child.type.toString() === PivotItemType.toString() the result is true. You can check my screenshot below for the console results:

So the issue seems to be that the function is not returning the same reference as before. I wonder if importing the other library creates an accidental rerender or something like that which might be causing the reference to be lost.

@jdhuntington @dzearing what do you think about this? I feel like this is on the other library's side and there isn't a lot we can do here, but let me know your thoughts.

[ecraig12345]

Unless we can figure out exactly what circumstances in another library cause this to happen (and maybe even if we can figure it out), I think we should switch the check to use toString or something rather than object identity.

Some theories I had were that the pivot code was getting evaluated twice, or that there were two versions of React on the page, but neither seems to be the case.

Also, I made a codesandbox of the bug for easier investigation: https://codesandbox.io/s/pivotitem-bug-5754j

[ecraig12345]

I went ahead and made PR #10806 with the change I suggested (I'd already done most of my investigation but Mak commented before me).

[khmakoto]

Thanks for the PR @ecraig12345!

[ecraig12345]

Turns out Stack and Card have the same issue, but the type.toString() check sometimes gave the wrong results in those cases since they're generated by createComponent. So now the PR checks displayName (which is correctly set by createComponent and used elsewhere by React) for Stack and Card, and name (a built-in function property) for Pivot.

[msft-github-bot]

:tada:This issue was addressed in #10806, which has now been successfully released as @uifabric/[email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-github-bot]

:tada:This issue was addressed in #10806, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site