Skip to content

Error when using a single TabItem component within parent Tabs component #8591

@farlowdw

Description

@farlowdw

Have you 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:

ill-3

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:

ill-4

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

ill-2

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:

log-1

With two items:

log-2

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

ill-1

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions