bug: IonTabs throws when a Fragment contains one IonRouterOutlet

Open Beginner friendly
#31,410 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the IonTabs implementation and reproduce the failure using the linked app with npm install and npm run dev. Confirm the fix by rendering an IonRouterOutlet as the only child in a React Fragment passed to IonTabs without the TypeError.

Written by the indexing model from the issue text.

Description

triage
Prerequisites
  • I have read the contributing guidelines.
  • I agree to follow the Code of Conduct.
  • I searched existing issues without finding this problem.
Ionic Framework Version

v8.x, v9.x, Nightly

Current Behavior

When IonRouterOutlet is the only child of a React Fragment passed to IonTabs, rendering throws:

TypeError: Cannot read properties of undefined (reading 'type')

IonTabs treats the Fragment's children as an array, but React stores a single child as an element.

Expected Behavior

IonTabs should render when IonRouterOutlet is wrapped in a single-child Fragment.

Steps to Reproduce
  1. Clone the reproduction.
  2. Run npm install and npm run dev.
  3. Open the app.
Code Reproduction URL

https://github.com/Benziza/ion-tabs-fragment-repro

Ionic Info
Ionic CLI       : 7.2.1
Ionic Framework : @ionic/react 9.0.1
NodeJS          : v25.6.0
npm             : 11.12.1
OS              : Windows 10
Additional Information

Removing the Fragment allows the same app to render.

Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
2d 20h
Merged PRs (30d)
35

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ionic-team/ionic-framework

All issues in ionic-team/ionic-framework

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.