Error when using a single TabItem component within parent Tabs component

[farlowdw]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Using a single TabItem component within a parent Tabs component causes a Uncaught TypeError: children.map is not a function error (this was not the case before the recent 2.3.0 release, as far as I can tell).

With the new release, if I visit /docs/success in the linked example repo, where two TabItem components are nested within a parent Tabs component, then everything works fine:

If, however, I visit /docs/fail, where a single TabItem component is within a parent Tabs component, then the page crashes due to a children.map is not a function error:

Inspecting the console makes it clear why this error is occurring:

After looking at the file containing the offending line of code, I decided to log children and the error became clear.

With a single item:

With two items:

A very superficial hack "resolves" the problem (at least in terms of getting the page not to crash):

Reproducible demo

https://stackblitz.com/edit/github-wahvzn

Steps to reproduce

1. Visit the repro link and observe the failure by navigating to /docs/fail. Then observe the success by visiting /docs/success.

Expected behavior

Continuity in terms of how TabItem components are rendered. Plurality should not matter. There are cases where it may be desirable to use a single TabItem within Tabs such as illustrating how to do things in different coding languages but only having time in the moment to do so for a single language.

Actual behavior

A page should not crash due to the presence of only a single TabItem within Tabs. I can't imagine this was an intentional design decision (since this worked fine in previous versions).

Your environment

Repro demo and source code (made using docusaurus.new): https://stackblitz.com/edit/github-wahvzn?file=docs/fail.md

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Thanks for the report. Just curious: are you actually going to use a single tab item in production? Or is this just an annoyance for local development?

[farlowdw]

@Josh-Cena Mostly the latter; however, I do have one project with a bunch of single tabs currently because I'm lazy and have only added content for Python instead of other languages, as referenced in the expected behavior for this bug -- when I mentioned "there are cases" I was really referencing that project with suboptimal tab use.

[dabeeeenster]

+1 for 1 tab in Prod. I'm using this here: https://docs.flagsmith.com/clients/server-side#logging and IMHO this would be the most appropriate formatting, even tho 1 tab element sounds a bit odd, it works here.

Screen Grab for if we modify the formatting waiting for this fix: